两个UserControl的WPF MVVM绑定位置,当一个移动时,另一个响应

时间:2018-05-24 19:03:00

标签: wpf mvvm data-binding

我正在尝试使用节点,引脚和电线构建图表。 让我假装我现在只关心电线和引脚。

电线

<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 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模式,当Pin移动时,来自Wire的StartPoint应该与Pin相同的位置,我肯定知道如何通过事件正常地执行此操作很多代码背后都没有,但我想要探索更多的方法。

我还需要能够序列化图表并在运行时添加引脚/连线(但这不是我的问题,只是额外的信息,因为我不确定MVVM如何与运行时动态的东西一起工作)

我是否应该分别为线和引脚设置模型,那么两者的视图模型也是如此?我很失落,并尝试观看很多视频,但我仍然很难用我的想法来应用它。

1 个答案:

答案 0 :(得分:0)

我建议使用带有画布的项目控件。这样,您就可以绑定您提及的属性并使用项目的数据模板。

    <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>

您的视图模型将沿着这条线

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

Canvas board item包含您要在项目模板中绑定的所有内容,如高度,宽度,连接等