Use RadDiagram in a DataTemplate with MVVM

[Jackey]

Hi team,
I am blocked by how to implement such a scenario.

<DataTemplate DataType="model:Line">
    <telerik:RadExpander x:Name="lineExpander"
                         VerticalAlignment="Center"
                         Style="{StaticResource LineRadExpanderStyle}"
                         IsExpanded="True"
                         DataContext="{Binding}"
                         telerik:AnimationManager.IsAnimationEnabled="False">
        <telerik:RadExpander.Header>
            <TextBlock Text="{Binding Name}" FontSize="14"/>
        </telerik:RadExpander.Header>
        <telerik:RadExpander.Content>
            <telerik:RadDiagram x:Name="xDiagram"/>
        </telerik:RadExpander.Content>
    </telerik:RadExpander>
</DataTemplate>

We know that we need to generate a ObservableGraphSourceBase object and assign it to GraphSource property. In my case, i need to turn the bound Line instance into Nodes and Links in the graph source and also whatever changes the Line object has, it should be refreshed in the diagram.

Thanks,
Jingfei

[Petar Mladenov]

Hi Jingfei,

I am afraid we miss important parts from your requirement. For example - where do you need this Template with the Expander inside applied ? What is the structure of your ViewModels. Is it possible for you to send us more detailled diagram /scheme of your models and your Views, this way we would be better able to advice you on configuring your MVVM Diagram / Application.

On a side note, to achieve 2-way MVVM you need to use ObservableGraphSource - you can refer to these help resources in whicch such approach is demonstrated.

Diagram DataBinding
Diagram How To Use MVVM
Diagram MVVM SDK Sample in GitHub

Regards,
Petar Mladenov
Telerik

 

 

[Jackey]

Hi Petar,
Sorry for the delay reply.
I paste the whole xaml file here

<Page x:Class="BC7100.Shell.Pages.Monitor"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:model="clr-namespace:BC7100.Shell.Model"

      xmlns:converters="clr-namespace:BC7100.Shell.Converters"

      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

      xmlns:command="http://www.galasoft.ch/mvvmlight"

      xmlns:userControls="clr-namespace:BC7100.Shell.UserControls"

      mc:Ignorable="d"

      d:DesignHeight="800" d:DesignWidth="1200"

      ContextMenu="{x:Null}"

      Title="Monitor" DataContext="{Binding Main, Source={StaticResource Locator}}">

     

    <!-- The above ContextMenu="{x:Null}" is used to disable the native context menu of that page -->

     

    <Page.Resources>

        <converters:SubLineKindToColorConverter x:Key="SubLineKindToColorConverter" />

         

        <DataTemplate x:Key="RadTabItemTemplate" DataType="{x:Type model:Station}">

            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

                <ItemsControl ItemsSource="{Binding Lines}">

                    <ItemsControl.ItemsPanel>

                        <ItemsPanelTemplate>

                            <StackPanel Orientation="Vertical"></StackPanel>

                        </ItemsPanelTemplate>

                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>

                        <DataTemplate DataType="model:Line">

                            <telerik:RadExpander x:Name="lineExpander"

                                                 VerticalAlignment="Center"

                                                 Style="{StaticResource LineRadExpanderStyle}"

                                                 IsExpanded="True"

                                                 DataContext="{Binding}"

                                                 telerik:AnimationManager.IsAnimationEnabled="False">

                                <telerik:RadExpander.Header>

                                    <TextBlock Text="{Binding Name}" FontSize="14"/>

                                </telerik:RadExpander.Header>

                                <telerik:RadExpander.Content>

                                    <userControls:LineDiagram x:Name="xLineDiagram"

                                                              Height="400"

                                                              IsZoomEnabled="False"

                                                              IsPanEnabled="False"

                                                              SelectionMode="None"

                                                              IsBackgroundSurfaceVisible="False"

                                                              ShapeStyleSelector="{StaticResource CustomShapeStyleSelector}"

                                                              ConnectionStyleSelector="{StaticResource CustomConnectionStyleSelector}"

                                                              Line="{Binding}"></userControls:LineDiagram>

                                </telerik:RadExpander.Content>

                            </telerik:RadExpander>

                        </DataTemplate>

                    </ItemsControl.ItemTemplate>

                </ItemsControl>

            </ScrollViewer>

        </DataTemplate>

    </Page.Resources>

     

    <Grid>

        <telerik:RadTabControl VerticalAlignment="Top"

                               DropDownDisplayMode="Visible"

                               HeaderBackground="{StaticResource MenuBackgroundBrush}"

                               ScrollMode="Viewport"

                               BorderThickness="0"

                               ItemsSource="{Binding Stations}"

                               DisplayMemberPath="NameAbbr"

                               DropDownDisplayMemberPath="Name"

                               ContentTemplate="{StaticResource RadTabItemTemplate}">

            <telerik:RadContextMenu.ContextMenu>

                <telerik:RadContextMenu>

                    <telerik:RadMenuItem Header="新增线路">

                        <i:Interaction.Triggers>

                            <i:EventTrigger EventName="Click">

                                <command:EventToCommand Command="{Binding AddLineCommand}" PassEventArgsToCommand="True"/>

                            </i:EventTrigger>

                        </i:Interaction.Triggers>

                    </telerik:RadMenuItem>

                </telerik:RadContextMenu>

            </telerik:RadContextMenu.ContextMenu>

        </telerik:RadTabControl>

    </Grid>

</Page>

public class LineGraph : ObservableGraphSourceBase<NodeViewModelBase, Link>
    {
omitted
....}

I don't know where i should put following code snippets

var diagramSource = new LineGraph();
diagramSource.PopulateGraph(newLine);
diagram.GraphSource = diagramSource;

Thanks,
Jingfei

[Jackey]

Hi Petar,
I think basically the problem is how to pass a parameter to a bound data context which is graph source. Hope make myself clear!

Best Regards,
Jingfei

[Jackey]

Hi Petar,
I think basically the problem is how to pass a parameter to the bound itemssource which is a graph. Hope make myself clear!

Jingfei

[Petar Mladenov]

Hi Jingfei,

In your DataBinding approach, you can simply bind the GraphSource of the Diagram to an ObservableGraphSourceBase property from your ViewModels.
To better demonstrate this, I created a test project with the following ViewModel structure.
- TabControl is bound to collection of TabModels
- TabModel has List of LineModels
 - the ItemsControl is bound to the LineModels
- every LineModel has GraphSource
- the Diagram in the Expander is bound to the GraphSource

You can find this implemented in the attachment. I hope this will help you proceed further.

Regards,
Petar Mladenov
Telerik