RadDiagramShape and DataTemplate

9 posts, 1 answers
  1. Mikhail
    Mikhail avatar
    6 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    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.

     

     

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    89 posts

    Posted 08 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Mikhail
    Mikhail avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2012 Link to this post

     

    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

  5. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 10 Oct 2014 in reply to Stefan Link to this post

    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


  6. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Oct 2014 Link to this post

    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
     

    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.

     
  7. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 16 Oct 2014 in reply to Zarko Link to this post

    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
  8. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 17 Oct 2014 Link to this post

    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
     

    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.

     
  9. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 27 Oct 2014 in reply to Zarko Link to this post

    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,
     

  10. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 28 Oct 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready