同步视图模型和视图 [英] Sunchronizing view model and view
问题描述
我有一个视图模型，包含一些节点和一些连接器：
I have a view model that consist of some nodes and some connectors:
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;}
}
现在我通过项目控件显示页面中的节点：
Now I display nodes in page by an items control:
<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的convert内容没有完全建立的时候。
As you see I have displaying template for nodes and connector, it work fine for nodes, but for connector I need to gets its corresponding start and end node so when a node in UI change its position I can track its change and reflects it in connector, I also need finally displaying with and height of displaying node (I say ElmenetThumb). In short, each node in model has a analogous ElmenetThumb in page I want to pass analogous ElmenetThumb of start and end nodes to analogous element of connector for position tracking. I trying to do that by connector as you can see in above code, but it doesn't work because in the time of calling convert content of ItemsControl not built completely.
推荐答案
我以另一种完全不同的方式做，我不能说它ViewModel。 A为我的画布定义显示方法：
I do that in another completely different way, that I can't say it ViewModel. A Define a display method for my canvas :
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);
}
}
}
t最好的办法。
你觉得怎么样？
But I think this isn't the best approach. What do you think?
这篇关于同步视图模型和视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
