RadDiagramShape and DataTemplate

[Mikhail]

Hello,
I am using RadDiagram and I am adding RadDiagramShape objects on the fly programatically. I use a simple DataTemplate which I want to use with created objects.And for each created shape, I want to set specific image and text which is defined in DataTemplate.
The problem I have is how to get FrameworkElement to pass with FindName.
Image imageInTemplate = (Image)Box.ContentTemplate.FindName("PartImageName", myContentPresenter);
What is the content presenter for the RadDiagramShape?
Here is the code snippet I use:

 

  <Window.Resources>
    <DataTemplate x:Key="SubItemTemplate">
      <Grid>
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="60*" />
        </Grid.ColumnDefinitions>
      <Image Margin="0" Grid.Column="0" x:Name="PartImageName" Stretch="Uniform" />
      <TextBlock Grid.Column="1" Text="Part ID" x:Name="PartID" />
      </Grid>
    </DataTemplate>
    </Window.Resources>
<telerik:RadDiagram Margin="2,2,2,2" x:Name="stateDiagram">
</telerik:RadDiagram>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
  RadDiagramShape StateBox = new RadDiagramShape()
  {
    Width = 100,
    Height = 100,
    Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape),
    ContentTemplate = (DataTemplate)this.FindResource("SubItemTemplate"),
  };
  //now change dynamically the picture and the text of the StateBox:
  ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(StateBox,0);
  Image imageInTemplate = (Image)Box.ContentTemplate.FindName("PartImageName", myContentPresenter);
  imageInTemplate.Source = new Uri(strFilePath, UriKind.Absolute);
  TextBlock textBlockInTemplate = (TextBlock)Box.ContentTemplate.FindName("PartID", myContentPresenter);
  textBlockInTemplate.Text = "some part id";
  stateDiagram.AddShape(StateBox);
}

Thank you very much.
Mikhail.

 

 

 

[Stefan]

Hi Mikhail,

In your case we recommend using ViewModels. If you chose this approach you can bind the Image.Source property in your DataTemplate and control its value from your ViewModel. That will allow you easily to change the image in the RadDiagramShape by setting a new Image.Source in the ViewModel's appropriate property.

I used your code snippet to create a sample project showing my approach. Please take a look at it and if you have further questions don't hesitate to contact us.

Regards,
Stefan
the Telerik team

[Mikhail]

 

Thanks Stefan!
Your aproach is much easier. I will do it that way.
Thanks!

P.S.
I managed to get my way working as well.
The trick was after adding a Box shape, to call  stateDiagram.UpdateLayout()!
and then I was able to get a Content Presenter for a shape:

stateDiagram.AddShape(Box);
stateDiagram.UpdateLayout();
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(Box);
Image imageInTemplate = (Image)Box.ContentTemplate.FindName("PartImageName", myContentPresenter);
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(mSelectedPartImageUri, UriKind.Absolute);
bi.EndInit();
imageInTemplate.Source = bi;

But Like I said, your way is much cleaner and easier.
Thanks a lot!
Mikhail

[Fabio]

Hi Stefan,

in your example copy and paste does not work neither is possible to edit the description of the original item.

Also in the example showed in this link http://www.telerik.com/help/wpf/raddiagrams-howto-mvvm.html
there are those bugs.

Unfortunately mvvm approach is the only compatible with my requirements.
Could you please give me a working solution? 
 Thanks

[Zarko]

Hi Fabrizio,
You can find a fully working MVVM example in our diagram SDK demos and here you can get our Sdk sample browser.
I've also attached a sample MVVM diagram so could you please examine it and tell us if it works for you.

Regards,
Zarko
Telerik

 

 

[Fabio]

Hi Zarko,

your example is in silverlight. 
Also in the sdk examples about MVVM there are many things not working, as I posted in Support ticket ID:867704.
In that ticket telerik admin posted a nice example thai is quite complete, but even in that example is not clear how to manage icons.

Could you please give an advanced example of mvvm image management?

Thanks

[Zarko]

Hello Fabrizio,
I'm sorry for the mistake - I've attached a new WPF sample project.
As for the other problems - they are all related to the specific MVVM implementation and that's why they are not included in our default viewModels. For example we can not implement undo/redo logic for MVVM scenarios because we don't know what the content of the shape will be - it could be text but it could also be a gridView.
Because of the variety of scenarios we've tried to provide enough entry points for customization - a good example for those are the SerializeNode and DeserializeNode methods of the SerializableGraphSourceBase. Using those methods you could easily save your icon path like this:

public override void SerializeNode(NodeViewModelBase node, SerializationInfo info)
{
    ...
    info["MyIconPath"] = node.IconPath;
}

and

public override NodeViewModelBase DeserializeNode(IShape shape, Telerik.Windows.Diagrams.Core.SerializationInfo info)
{
    ...
    if (info["MyIconPath"] != null)
    {
        newNode.IconPath = info["MyIconPath"].ToString();
    }
    ...
}

Please note that those methods are called whenever you copy/paste a shape or save/load a diagram and you can put anything inside the info object but it is saved as string and you should be able to recreate the object from the string.
I hope I was able to help you and if you have more questions feel free to ask.

Regards,
Zarko
Telerik

 

 

[Fabio]

Thank you Zarko, your post was clear enough.

Anyway I solved this issue once for ever: I used an external serializer (there are many serialization services that simply serialize all public properties) to serialize the entire view model in a field of SerializationInfo and then I use that field to restore back the new object.
Could be a nice improvement for a new release.

Regards,
 

[Zarko]

Hi Fabrizio,
I'm glad you were able to fix this issue and also thank you for the feedback - we'll consider it for our upcoming releases but you can do something very similar at the moment using the XmlSerializer so I can't tell you if it'll be added.

Best regards,
Zarko
Telerik