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> 

보시다시피 내가 노드와 커넥터에 대한 템플릿을 표시, 노드에 대해, 노드에 대해 잘 작동 하지만 커넥터에 대한 나는 그것의 변화를 추적 할 수있는 UI의 노드를 변경할 때 노드의 해당 시작과 끝 노드를 가져올 필요가 커넥터에 반영 마침내 표시 및 높이 표시해야합니다. t 표시 노드 (나는 ElmenetThumb라고 말함). 간단히 말해, 모델의 각 노드는 유사한 ElmenetThumb 페이지를 가지고 있습니다. 비슷한 ElmenetThumb의 시작 및 끝 노드를 위치 추적을위한 커넥터의 유사한 요소로 전달하려고합니다. 위 코드에서 볼 수 있듯이 커넥터를 사용하여이 작업을 수행하려고했으나 ItemsControl의 컨텐트를 완전히 변환하지 않아도 변환 할 수 있기 때문에 작동하지 않습니다.

Answer 1

다른 완전히 다른 방식으로, 나는 그것을 ViewModel이라고 말할 수 없다. 캔버스에 대한 표시 방법을 정의하십시오.

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

그러나 이것이 최선의 방법은 아니라고 생각합니다. 당신은 어떻게 생각하십니까?