C＃WPF如何在折線點上繪制矩形

Question

我正在嘗試在畫布上畫一條折線，在每個點上都將具有矩形。 折線綁定到ViewModel中的點集合。

當我嘗試為每個點設置DataTemplate時（如下所示），它在折線點上沒有顯示矩形。

有什么辦法可以在折線點上顯示矩形？

稍后，我想通過拖動這些點來調整折線。

<Polyline Points="{Binding EdgePoints, Converter={StaticResource pointCollectionConverter}}" StrokeThickness="2">
    <Polyline.Resources>
        <DataTemplate DataType="{x:Type Point}">
            <Rectangle Width="20" Height="20" Fill="Black"/>
        </DataTemplate>
    </Polyline.Resources>
</Polyline>

這是我要繪制矩形的示例。

Answer 1

您可能具有如下所示的視圖模型。 除了明顯的部分外，它還會向每個Vertex附加/分離一個PropertyChanged處理程序，以觸發Vertices屬性的PropertyChanged事件。 這是更新折線的點綁定所必需的。

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class Vertex : ViewModelBase
{
    private Point point;

    public Point Point
    {
        get { return point; }
        set { point = value; OnPropertyChanged(); }
    }
}

public class ViewModel : ViewModelBase
{
    public ViewModel()
    {
        Vertices.CollectionChanged += VerticesCollectionChanged;
    }

    public ObservableCollection<Vertex> Vertices { get; }
        = new ObservableCollection<Vertex>();

    private void VerticesCollectionChanged(
        object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == NotifyCollectionChangedAction.Add)
        {
            foreach (var item in e.NewItems.OfType<INotifyPropertyChanged>())
            {
                item.PropertyChanged += VertexPropertyChanged;
            }
        }
        else if (e.Action == NotifyCollectionChangedAction.Remove)
        {
            foreach (var item in e.OldItems.OfType<INotifyPropertyChanged>())
            {
                item.PropertyChanged -= VertexPropertyChanged;
            }
        }

        OnPropertyChanged(nameof(Vertices));
    }

    private void VertexPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        OnPropertyChanged(nameof(Vertices));
    }
}

頂點到PointCollection轉換器可能看起來像這樣：

public class VerticesConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        var vertices = value as IEnumerable<Vertex>;

        return vertices != null
            ? new PointCollection(vertices.Select(v => v.Point))
            : null;
    }

    public object ConvertBack(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

該視圖將使用折線和ItemsControl。 ItemsTemplate將聲明一個Thumb元素來處理頂點的拖動。

<Canvas>
    <Canvas.Resources>
        <local:VerticesConverter x:Key="VerticesConverter"/>
        <Style x:Key="ThumbStyle" TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Rectangle Fill="Transparent" Stroke="Red"
                                   Width="10" Height="10" Margin="-5,-5"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <EventSetter Event="DragDelta" Handler="ThumbDragDelta"/>
        </Style>
    </Canvas.Resources>
    <Polyline Points="{Binding Vertices, Converter={StaticResource VerticesConverter}}"
              Stroke="DarkBlue" StrokeThickness="3" StrokeLineJoin="Round"/>
    <ItemsControl ItemsSource="{Binding Vertices}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding Point.X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Point.Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Thumb Style="{StaticResource ThumbStyle}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

最后，Thumb的DragDelta處理程序：

private void ThumbDragDelta(object sender, DragDeltaEventArgs e)
{
    var vertex = (Vertex)((Thumb)sender).DataContext;

    vertex.Point = new Point(
        vertex.Point.X + e.HorizontalChange,
        vertex.Point.Y + e.VerticalChange);
}