C # wpf, как рисовать прямоугольник на полилинии - PullRequest
Новая
       12

C # wpf, как рисовать прямоугольник на полилинии

0 голосов
/ 06 октября 2018

Я пытаюсь нарисовать ломаную линию на холсте, который будет иметь прямоугольник в каждой точке.Полилиния связана с набором точек из 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>

Вот пример, где я хочу рисовать прямоугольники.

example

1 Ответ

0 голосов
/ 07 октября 2018

У вас может быть модель вида, подобная показанной ниже.Помимо очевидных частей, он присоединяет / отсоединяет обработчик PropertyChanged к / от каждого Vertex, чтобы инициировать событие PropertyChanged для свойства Vertices.Это необходимо для обновления точечной привязки полилинии. 

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));
    }
}

Конвертер Vertices to 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();
    }
}

Представление будет использовать Polyline и 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>

Наконец, обработчик большого пальца 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);
}
...