Use RadDiagram in a DataTemplate with MVVM

7 posts, 1 answers
  1. Jackey
    Jackey avatar
    71 posts
    Member since:
    Oct 2014

    Posted 15 Mar 2015 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 17 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jackey
    Jackey avatar
    71 posts
    Member since:
    Oct 2014

    Posted 31 Mar 2015 in reply to Petar Mladenov Link to this post

    Hi Petar,
    Sorry for the delay reply.
    I paste the whole xaml file here
    <Page x:Class="BC7100.Shell.Pages.Monitor"
          xmlns:model="clr-namespace:BC7100.Shell.Model"
          xmlns:converters="clr-namespace:BC7100.Shell.Converters"
          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
  5. Jackey
    Jackey avatar
    71 posts
    Member since:
    Oct 2014

    Posted 01 Apr 2015 in reply to Petar Mladenov Link to this post

    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
  6. Jackey
    Jackey avatar
    71 posts
    Member since:
    Oct 2014

    Posted 01 Apr 2015 in reply to Petar Mladenov Link to this post

    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
  7. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Jackey
    Jackey avatar
    71 posts
    Member since:
    Oct 2014

    Posted 01 Apr 2015 in reply to Petar Mladenov Link to this post

    Thanks Petar. It works nicely. Thanks again.
Back to Top
UI for WPF is Visual Studio 2017 Ready