Сунхронизирующий вид модели и вид - PullRequest
Новая
       10

Сунхронизирующий вид модели и вид

0 голосов
/ 10 января 2011

У меня есть модель представления, которая состоит из нескольких узлов и некоторых соединителей: 

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 не создается полностью.

1 Ответ

0 голосов
/ 10 января 2011

Я делаю это другим совершенно другим способом, что я не могу сказать это 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);
            }
        }
    }

Но я думаю, что это не лучший подход.Что ты думаешь?

...