WPF: Display polyline and points simultaneously - wpf

Question

I have a list of line segments and each line segment contains a list of points. Being contained on the same canvas, I want to display each line segment and simultaneously mark each point location (ie w/ an ellipse). I can use an ItemsControl to display the segments but I'm stuck at how to display the points. I began implementing a custom control derived from Shape, but there must be an easier way. Thanks in advance for the help.
public class VesselAnatomy : IEnumerable, INotifyCollectionChanged
{
...
List<BaseVessel> _Segments;
...
}
public class BaseVessel : INotifyPropertyChanged
{
...
ObservableCollection<Point> _VesselPoints;
public ObservableCollection<Point> VesselPoints
{
get
{
return _VesselPoints;
}
}
...
}
public MainWindow()
{
...
VesselAnatomy Vessels = new VesselAnatomy();
...
MasterContainer.DataContext = Vessels;
...
}
<ItemsControl x:Name="VesselDisplay"
Height="750"
Width="750"
ItemsSource="{Binding}">
<Polyline Points="{Binding VesselPoints, Converter={StaticResource ObsListPointConverter}}"
Stroke="Red"
StrokeThickness="7">
<Polyline.ToolTip>
<ToolTip>
<TextBlock Text="{Binding Name}"/>
</ToolTip>
</Polyline.ToolTip>
</Polyline>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

You can use an ItemsControl for the points aswell just change the ItemsPanel and bind the elements positions.
<Window ... >
<Window.Resources>
<PointCollection x:Key="points">
<Point X="20" Y="20" />
<Point X="40" Y="35" />
<Point X="60" Y="40" />
<Point X="80" Y="60" />
<Point X="100" Y="40" />
<Point X="120" Y="30" />
<Point X="140" Y="40" />
<Point X="160" Y="20" />
</PointCollection>
<DataTemplate DataType="{x:Type Point}">
<Ellipse Width="9" Height="9" Fill="White" Stroke="DodgerBlue" StrokeThickness="1" x:Name="e">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="-4" Y="-4" />
<TranslateTransform X="{Binding X}" Y="{Binding Y}" />
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</DataTemplate>
</Window.Resources>
<Grid>
<Polyline x:Name="line" Stroke="LightBlue" StrokeThickness="2" Points="{StaticResource points}" />
<ItemsControl x:Name="ptsdisplay" ItemsSource="{StaticResource points}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Window>
If you have lots of points and this method is too slow try http://msdn.microsoft.com/en-us/magazine/dd483292.aspx