MVVM RadDiagrams via Property Path of a ViewModel

[Timon]

Hi, I'm trying to get the following working:

I have a ViewModel which loads a list in a list.xaml. If something is clicked in the list.xaml a detail.xaml is opened

Now in this detail.xaml I have first a grid with some information about the clicked list item (description etc.) and below I want to show a RadDiagram with shapes.

To achieve this I have a property in my ViewModel which creates a object GraphSource of ObservableGraphSourceBase and returns it.

For simplicity the object just have a constructor with the following code:

1.Public Sub New()
2.    Dim warenEingang = New NodeViewModelBase With {.Content = "Wareneingang", .Position = New Point(40, 40)}
3.    Dim waschhaus = New NodeViewModelBase With {.Content = "Waschhaus", .Position = New Point(40, 80)}
4.    Dim warenAusgang = New NodeViewModelBase With {.Content = "Warenausgang", .Position = New Point(40, 120)}
5.    MyBase.AddNode(warenEingang)
6.    MyBase.AddNode(waschhaus)
7.    MyBase.AddNode(warenAusgang)
8.End Sub

 

In the ViewModel the property looks like this:

1.Public ReadOnly Property myGraphProperty()
2.    Get
3.        Dim graphSource = New GraphSource()
4.        Return graphSource
5.    End Get
6.End Property

 

Now on my detail.xaml the stuff for my RadDiagram is loaded from an external xaml, let's call it "raddiagram.xaml"

1.<!-- detail.xaml-->
2.<UserControl x:Class="detail" [...]>
3.    <!-- grid implementation -->
4.    <local:raddiagram.xaml />
5.</UserControl>

 

Finally I'min the raddiagram.xaml :-)

01.<UserControl x:Class="raddiagram"
02.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
05.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
06.    xmlns:local="clr-namespace:Views"
07.    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
08.    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
09.    mc:Ignorable="d"
10.    d:DesignHeight="800" d:DesignWidth="800">
11.<Grid x:Name="LayoutRoot">
12.   <telerik:RadDiagram x:Name="diagram" GraphSource="{Binding myGraphProperty}" />
13.
14.   <telerik:RadTreeView x:Name="tree" Grid.Column="1" Width="300" ItemsSource="{Binding Items}">
15.        <telerik:RadTreeView.ItemTemplate>
16.           <DataTemplate>
17.                <TextBlock Text="{Binding Content}" />
18.           </DataTemplate>
19.       </telerik:RadTreeView.ItemTemplate>
20.   </telerik:RadTreeView>
21.</Grid>
22.</UserControl>

 

With this example xaml - taken from the documentation --> two-way-mvvm , my shapes are shown (still the content needs a toString, but this is not the big problem here).
Unfortunately all shapes are laying at position (0,0) - but when trying to achieve anything written in with styles / templates nothing is shown anymore.

Question: How can I achieve, via a property access of a ViewModel, that I can "iterate" in my xaml over all shapes to style them (setter property position etc.).
The goal is (later) after the three shapes are shown correctly (as you can see above, the x-position is the same, but y- is increasing) to insert connections between them.

I tried this: http://docs.telerik.com/devtools/wpf/controls/raddiagram/howto/mvvm-style-selectors but then nothing (shapes) is shown anymore on the RadDiagram.

Thanks for any hints/help

Timon

[Dinko | Tech Support Engineer]

Hi Timon,

Thank you for your interest in our RadDiagram control.

You can create a custom style with a TargetType set to   and set this style to the ShapeStyle property of the RadDiagram. In the custom style, you can bind the Position property of the shape to a property from your model. More information about using MVVM with RadDiagram you can find in the Use MVVM in RadDiagram help article in our documentation. We also have SDK example based on this article in our GitHub repository.

Another helpful resource is the SDK Samples Browser - a desktop application which automatically connects to GitHub and downloads the XAML SDK repository locally.

Let us know if you have more questions.

Regards,
Dinko
Telerik by Progress

[Timon]

Hi Dinko,

Thanks for your reply.

To break things down to get to know to the ShapeStyle functionality I just did the following xaml file:

01.<UserControl x:Class="test"
02.             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
05.             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
06.             xmlns:local="clr-namespace:Views"
07.             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
08.             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
09.             xmlns:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
10.             mc:Ignorable="d"
11.             d:DesignHeight="800" d:DesignWidth="800">
12.    <Grid>
13.        <Grid.Resources>
14.            <Style TargetType="telerik:RadDiagramShape" x:Key="CustomShapeStyle">
15.                <Setter Property="Background" Value="LightGreen" />
16.                <Setter Property="FontWeight" Value="Bold" />
17.            </Style>
18.        </Grid.Resources>
19.        <telerik:RadDiagram x:Name="xDiagram" ShapeStyle="{StaticResource CustomShapeStyle}">
20.            <telerik:RadDiagramShape x:Name="shape1" Position="20,20" Content="Shape 1" />
21.            <telerik:RadDiagramShape x:Name="shape2" Position="220,20" Content="Shape 2" />
22.            <telerik:RadDiagramConnection Source="{Binding ElementName=shape1}"
23.                Target="{Binding ElementName=shape2}" />
24.        </telerik:RadDiagram>
25.    </Grid>
26.</UserControl>

 

Which is a 1:1 copy from your tutorial customize-the-raddiagram shape-style

But I don't see anything in my application, just the blank RadDiagram background grid pattern.

In Visual Studio I get the following information in the direct window:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=shape1'. BindingExpression:(no path); DataItem=null; target element is 'RadDiagramConnection' (Name=''); target property is 'Source' (type 'IShape')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=shape2'. BindingExpression:(no path); DataItem=null; target element is 'RadDiagramConnection' (Name=''); target property is 'Target' (type 'IShape')

I guess something else is missing?

In the project the following references are implemented:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.Chart
- Telerik.Windows.Controls.DataVisualization
- Telerik.Windows.Controls.Diagrams
- Telerik.Windows.Controls.DiagramsExtensions
- Telerik.Windows.Controls.ImageEditor
- Telerik.Windows.Controls.Input
- Telerik.Windows.Controls.Navigation
- Telerik.Windows.Data
- Telerik.Windows.Diagrams.Core     

[Timon]

To fix the DataError problem I need to do the following:

 

1.<telerik:RadDiagramConnection Source="{x:Reference shape1}"
2.                Target="{x:Reference shape2}" />

 

Now I can see the connection line, but now shapes. If I remove the ShapeStyle attribute of the telerik:RadDiagram I can see everything, unfortunately with no stylings (background and fontweight).

My application has a problem either with Grid.Resources or with the Style element.. ?

[Timon]

Okay also fixed the problem with "no stylings". I need to add the "BasedOn" attribute to my <Style> element.

Now I can go back to my initial problemby binding my graphsource to the RadDiagram.

I'll keep everyone updated, if any progress is made or when I am stucked again.

[Timon]

Finally I found my mistake!

I don't know why I did this, but the problem was in my constructor of the GraphSource.
I inexplicably added my nodes to the parent object MyBase instead of adding it to the current object with Me.

So now the ViewModel opens the list.xaml which opens a detail page when clicking a grid item. On the detail page there is a callthrough for my diagram.xaml in which I have the RadDiagram with GraphSource="{Binding myProperty}".
The myProperty is a ReadOnly property in the ViewModel which just creates the GraphSource object and returns it.
The GraphSource constructor is creating the nodes and adding them to itself.

Now I can fill the the GraphSource with stuff from the database (so I have a bunch of shapes which are related to database rows).

Lots of testing, changing, reading and manipulating the sample mvvm C# project solved this... ;-)

[Dinko | Tech Support Engineer]

Hello Timon,

We are happy to hear that you managed to find a solution for your issue.

If you have any other questions you can open a new thread regarding your question.

Regards,
Dinko
Telerik by Progress