开发者

WPF: Display polyline and points simultaneously

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 cus开发者_StackOverflow社区tom 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>


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜