Sunchronizing view model and view

Question

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>

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.

score 0 · Answer 1 · answered Jan 10 '11 at 06:30

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

But I think this isn't the best approach. What do you think?

Sunchronizing view model and view

1 Answers1

Linked