Two different custom shapes in RadDiagram

2 posts, 0 answers
  1. Jason
    Jason avatar
    3 posts
    Member since:
    Jul 2013

    Posted 08 Aug 2014 Link to this post

    In my RadDiagram, I currently have the following XAML:

      <Style TargetType="telerik:RadDiagramShape">
        <Setter Property="Geometry" Value="{Binding Geometry, Mode=TwoWay}"></Setter>

        <TextBlock Text="{Binding Header}" ></TextBlock>

    Now I want something another shape, with the same style, but with a ShapeTemplate like:

        <TextBlock Text="{Binding Header}" ></TextBlock>
        <TextBlock Text="{Binding SomeValue}" ></TextBlock>
        <TextBlock Text="{Binding AnotherHeader}" ></TextBlock>

    Which can also be edited (only SomeValue):
        <TextBlock Text="{Binding Header}" ></TextBlock>
        <TextBox Text="{Binding SomeValue, Mode=TwoWay}" />
        <TextBlock Text="{Binding AnotherHeader}" ></TextBlock>
    How can I accomplish having both types of shapes in the same Diagram?
    Can this be done in XAML, or do I have to do this in code-behind?
    For both types of solutions: How can I accomplish this?

    Thanks in advance!
  2. Martin Ivanov
    Martin Ivanov avatar
    1444 posts

    Posted 12 Aug 2014 Link to this post

    Hi Jason,

    The WPF framework provides a solution for the scenarios when you have a control that displays a collection of items and you want to apply different template for the different types of items. Most of the items controls exposes a property ItemTemplate that defines a template for the items. Some of them also exposes ItemTemplateSelector property that accepts a class that derives from the DataTemplateSelector class. You can see how to use DataTemplateSelector in the corresponding MSDN article.

    The ShapeTemplate property of the RadDiagram has corresponding ShapeTemplateSelector, the same applies for the ShapeEditTemplate, there is ShapeEditTemplateSelector. Basically you can create a class that derives from the DataTemplate selector and override its SelectTemplate() method.

    public class ShapeTemplateSelector : DataTemplateSelector
      public DataTemplate Shape1Template { get; set; }
      public DataTemplate Shape2Template { get; set; }
      public override DataTemplate SelectTemplate(object item,
        DependencyObject container)
        if (object is MyFirstObject)
          return ShapeTemplate;
        return Shape2Template;

    I hope this helps.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Back to Top