Sunchronizingビューモデルとビュー

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> 

ご覧のとおり私はノードとコネクタのテンプレートを表示していますが、それはノードのためにはうまく動作します。 しかし、コネクタでは、対応する開始ノードと終了ノードを取得する必要があります。また、最後に表示する必要がありますノードを表示する（私は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); 
      } 
     } 
    } 

しかし、私はこれが最善の方法ではないと思います。 あなたはどう思いますか？