同步视图模型和视图

Question

我有一个由一些节点和一些连接器组成的视图模型：

public class ViewModel
{
    public List<Node> Nodes{get;set;}
    public List<Connector> Connectors{get;set;}
}

public Class Node
{
   public Point Position{get;set;}
}

public class Connector
{
   public Node StartNode{get;set;}  
   public Node EndNode{get;set;}    
}

现在我通过项目控件在页面中显示节点：

   <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
            <local:ElementThumbConverter x:Key="ElementThumbConverter"/>
            <local:ElementThumbConverter2 x:Key="ElementThumbConverter2"/>
            <Style  x:Key="ElementThumbVMDataTemplateStyle" TargetType="ContentPresenter">
                <Setter Property="Canvas.Left"  Value="{Binding CanvasLeft,Mode=TwoWay}" />
                <Setter Property="Canvas.Top"  Value="{Binding CanvasTop,Mode=TwoWay}" />
                <!--<Setter Property="Canvas.Top"   Value="{Binding RelativeSource={RelativeSource Self},Path=ContentTemplate.elementThumb.(Canvas.Top), Mode=TwoWay}" />-->
            </Style >
            <DataTemplate DataType="{x:Type vm:ElementThumbVM}">
                <!--Canvas.Left="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContentPresenter},Path=(Canvas.Left),Mode=TwoWay}"-->
                <kw:ElementThumb Name="elementThumb" Tag="" 
                                 Canvas.Left="{Binding CanvasLeft,Mode=TwoWay}"
                                 Canvas.Top="{Binding CanvasTop,Mode=TwoWay}">
                </kw:ElementThumb>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding ElementType}">
                        <DataTrigger.Value>
                            <vm:ElementType>BusinessServer</vm:ElementType>
                        </DataTrigger.Value>
                        <Setter TargetName="elementThumb" Property="Style" Value="{StaticResource BussinesServerStyle}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementType}">
                        <DataTrigger.Value>
                            <vm:ElementType>DataBase</vm:ElementType>
                        </DataTrigger.Value>
                        <Setter TargetName="elementThumb" Property="Style" Value="{StaticResource DataBaseStyle}"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
            <DataTemplate DataType="{x:Type vm:ConnectorVM}">
                <kw:Connector>
                    <kw:Connector.StartElementThumb>
                        <Binding Converter="{StaticResource ElementThumbConverter2}">
                            <Binding.Source>
                                <MultiBinding Converter="{StaticResource ElementThumbConverter}">
                                    <Binding Path="ElementThumbVMStartId" />
                                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType=kw:DiagramCanvas}"/>
                                </MultiBinding>
                            </Binding.Source>
                        </Binding>
                    </kw:Connector.StartElementThumb>
                    <kw:Connector.EndElementThumb>
                        <Binding Converter="{StaticResource ElementThumbConverter2}">
                            <Binding.Source>
                                <MultiBinding Converter="{StaticResource ElementThumbConverter}">
                                    <Binding Path="ElementThumbVMEndId" />
                                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType=kw:DiagramCanvas}"/>
                                </MultiBinding>
                            </Binding.Source>
                        </Binding>
                    </kw:Connector.EndElementThumb>
                </kw:Connector>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>

    <ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  ItemsSource="{Binding AllElements}" x:Name="mainCanvasControl"
                  ItemContainerStyle="{StaticResource ElementThumbVMDataTemplateStyle}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <kw:DiagramCanvas Name="mainCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

如您所见，我显示了节点和连接器的模板，它适用于节点， 但是对于连接器，我需要获取其相应的开始和结束节点，因此当 UI 中的节点更改其位置时，我可以跟踪其更改并将其反映在连接器中，我还需要最终显示显示节点的高度和高度（我说 ElmenetThumb）。 简而言之，模型中的每个节点在页面中都有一个类似的 ElmenetThumb 我想将开始和结束节点的类似 ElmenetThumb 传递给连接器的类似元素以进行位置跟踪。正如您在上面的代码中看到的那样，我尝试通过连接器来做到这一点，但它不起作用，因为在调用 ItemsControl 的转换内容时没有完全构建。

Answer 1

我以另一种完全不同的方式做到这一点，我不能说它是 ViewModel。 A 为我的画布定义一个显示方法：

public class ConfigCanvas : Canvas
    {
        Dictionary<Node, ElementThumb> nodes = new Dictionary<Node, ElementThumb>();

        public void Dispaly(SettingsPackModel model)
        {
            foreach (Node node in model.Nodes)
            {
                ElementThumb element = new ElementThumb();

                Binding topBinding = new Binding("LayoutInfo.CanvasTop");
                topBinding.Source = node;
                element.SetBinding(Canvas.TopProperty, topBinding);

                Binding leftBinding = new Binding("LayoutInfo.CanvasLeft");
                leftBinding.Source = node;
                element.SetBinding(Canvas.LeftProperty, leftBinding);

                element.Style = (Style)FindResource(node.NodeType + "Style");

                this.Children.Add(element);
                nodes.Add(node, element);
            }

            foreach (Connection connection in model.Connections)
            {
                Connector connector = new Connector()
                {
                    StartElementThumb = nodes[connection.StartNode],
                    EndElementThumb = nodes[connection.EndNode]
                };

                connector.Style = (Style)FindResource(typeof(Connector)); 

                this.Children.Add(connector);
            }
        }
    }

但我认为这不是最好的方法。 你怎么看？