PathListBox is not working properly in Windows Phone 8 - xaml

Question

I'm porting an app from Windows Phone 7 to Windows Phone 8 and am having some problems with the PathListBox control.
Here's the XAML:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Path x:Name="path" Data="M58,382 C59,378 67,156 162,216 C257,276 268,381 325,268 C382,155 470,188 345,107.999 C220,27.9988 191,-10.0014 51,46.9988 C-89,103.999 -106,203.999 18,185.999 C142,167.999 108,105.999 179,130.999" HorizontalAlignment="Left" Height="363.298" Margin="4.98,54.202,0,0" Stretch="Fill" Stroke="Red" UseLayoutRounding="False" VerticalAlignment="Top" Width="475.02" StrokeThickness="3"/>
<mec:PathListBox HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100">
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath SourceElement="{Binding ElementName=path}"/>
</mec:PathListBox.LayoutPaths>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
</mec:PathListBox>
</Grid>
The PathListBoxItems are not following the path like they do in WPF, Silverlight, and Windows Phone 7. What gives?
No compilation errors or warning, visual studio 2012 gives me no warnings. In the LayoutPaths list in the properties panel in Blend 5, There is a little yellow warning symbol on the "path" item next to the remove "-" button. The tooltip upon hovering the icon with the mouse states :
This object does not exist or is a descendant of this PathListBox.
This does not appear to be true given the XAML I've provided.
I've tried this with a rectangle, ellipse, and strait line. I've changed the order in which they were declared. It doesn't matter, Blend 5 always gives me the same little warning. Any one else experiencing this with Windows Phone 8 PathListBox?

Answer 1

I've sussed most it. The wp8 variant is missing the control templates. I copied the itemcontainer style from wp7 into the local resources of wp8 app and it seems to be working now;
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PathListBoxStyle1" TargetType="mec:PathListBox">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<mec:PathPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBox">
<Grid>
<!--
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
-->
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" Padding="{TemplateBinding Padding}">
<ItemsPresenter/>
</Border>
<!--
<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="-1,3,0,0"/>
</Grid>
</Border>
-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding ElementName, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<mec:PathPanel/>
</ItemsPanelTemplate>
<mec:IsArrangedToScaleConverter x:Key="IsArrangedToScaleConverter"/>
<Style x:Key="PathListBoxItemStyle1" TargetType="mec:PathListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBoxItem">
<Grid Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}" ScaleX="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<SkewTransform/>
<RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
to use it;
<mec:PathListBox x:Name="MyPathListBox" HorizontalAlignment="Left"
Height="100"
VerticalAlignment="Top"
Width="100"
Style="{StaticResource PathListBoxStyle1}"
ItemContainerStyle="{StaticResource PathListBoxItemStyle1}"
ItemsSource="{Binding Items}"
>
<mec:PathListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock>bla</TextBlock>
</Grid>
</DataTemplate>
</mec:PathListBox.ItemTemplate>
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath Orientation="OrientToPath" SourceElement="{Binding ElementName=path}" />
</mec:PathListBox.LayoutPaths>
</mec:PathListBox>

Answer 2

It seems to work better if you use code rather than xaml, but even then it still ignores some of the settings;
private PathListBox AttachPathListBoxToShape(ViewModel viewModel, IEnumerable itemSource, Shape shape, string dataTemplateKey, string itemsPanelTemplateKey)
{
DataTemplate dataTemplate = (DataTemplate)Application.Current.Resources[dataTemplateKey];
ItemsPanelTemplate itemsPanelTemplate = (ItemsPanelTemplate)Application.Current.Resources[itemsPanelTemplateKey];
PathListBox dynoListBox = new PathListBox();
dynoListBox.ItemsSource = itemSource;
dynoListBox.ItemTemplate = dataTemplate;
dynoListBox.ItemsPanel = itemsPanelTemplate;
LayoutPath dynoPath = new LayoutPath();
dynoPath.SourceElement = shape;
dynoPath.Distribution = Distribution.Even;
dynoPath.Orientation = Microsoft.Expression.Controls.Orientation.OrientToPath;
dynoListBox.LayoutPaths.Add(dynoPath);
return dynoListBox;
}