WPF MVVM связывает позиции двух пользовательских элементов управления, когда один перемещается, другой реагирует

Question

Я пытаюсь построить диаграмму с узлами, контактами и проводами.Давайте представим, что мне сейчас небезразличны только провода и контакты.

Провод

<Path Stroke="Red" StrokeThickness="2" >
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="### HERE I NEED TO BIND TO PIN POSITION ###">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <BezierSegment Point1="100 100"
                                               Point2="100 50"
                                               Point3="300 200"/>
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Взгляните на PathFigure s StartPoint , значение Point , которое сообщает проводу, с чего начинать.

Теперь вывод намного проще, в основном это Thumb (который позволяет легко перетаскивать на холст)

<UserControl x:Class="WireMvvm.Pin"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WireMvvm"
         mc:Ignorable="d" 
         d:DesignHeight="10" d:DesignWidth="10">
<Thumb Background="Red">
</Thumb>

Что я не знаю, как это сделать, это применить шаблон MVVM в этом случае и какПин перемещается, точка запуска из провода должна располагаться в том же месте, что и Пин, я точно знаю, как это делать обычно с событиями и большим количеством кода позади, и не думаю, что это плохо, но я хотел бы изучить другие способы.

Мне также нужно иметь возможность сериализовать диаграмму и добавлять контакты / провода во время выполнения (но это не мой вопрос, просто дополнительная информация, потому что я не уверен, как MVVM работает с динамическими вещами во время выполнения)

Если у меня есть модели для провода и булавки отдельно, тогдамодели для обоих тоже?Я серьезно заблудился и пытался смотреть много видео, но я все еще изо всех сил пытаюсь применить это с моей идеей.

Answer 1

Я бы рекомендовал использовать элемент управления с холстом внутри него.Таким образом, вы можете связать свойства, которые вы упомянули, и использовать шаблоны данных для своих элементов.

    <ScrollViewer x:Name="CanvasScroller" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
    <ItemsControl Name="ItemsContainer"
                  ItemsSource="{Binding ElementName=self, Path=CanvasBoardViewModel.BoardItems}" 
                  AllowDrop="True">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas x:Name="_canvas" IsItemsHost="True" Background="White" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding CurrentLocation.X}"/>
                <Setter Property="Canvas.Top" Value="{Binding CurrentLocation.Y}"/>
                <Setter Property="Width" Value="{Binding Width}" />
                <Setter Property="Height" Value="{Binding Height}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>

    </ItemsControl>
</ScrollViewer>

Ваши шаблоны данных могут быть примерно такими:

<DataTemplate DataType="{x:Type local:CanvasBoardItem}">
        <Grid>
            <Rectangle>

            </Rectangle>
            <Thumb></Thumb>
            <Thumb></Thumb>
            <Thumb></Thumb>
        </Grid>
 </DataTemplate>

Ваша модель представления может быть чем-то вроде этихline

public class ViewModel
{
    public ObservableCollection<CanvasBoardItem> BoardItems { get; private set; }

    public ICommand SerializeDataCommand { get; }

    public ViewModel()
    {
        //Set up command here
        //Set up board items here
    }
}

Элемент доски холста содержит все элементы, которые вы хотите привязать в шаблоне элементов, такие как высота, ширина, соединения и т. д.