Sunchronizing視圖模型和視圖

我有一個由一些節點和一些連接器的視圖模型：Sunchronizing視圖模型和視圖

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中的節點更改其位置時，我可以跟蹤其更改並將其反映在連接器中，I還需要最後顯示和提高t顯示節點（我說ElmenetThumb）。簡而言之，模型中的每個節點在頁面中都有一個類似的ElmenetThumb，我想將類似的開始和結束節點的ElmenetThumb傳遞給用於位置跟蹤的連接器的類似元素。我試圖通過連接器來做到這一點，你可以在上面的代碼中看到，但它不起作用，因爲在調用ItemsControl的轉換內容的時候並沒有完全構建。

來源

2011-01-10 mehran

我以另一種完全不同的方式做到這一點，我不能說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); 
      } 
     } 
    }

但我認爲這不是最好的方法。你覺得呢？

來源

2011-01-10 06:30:48 mehran

Sunchronizing視圖模型和視圖

回答

相關問題