Edit this page

Customize the ItemInformationAdorner

This article will guide you through the steps that you need to take to customize how the RadDiagram visualizes information about the shapes.

The RadDiagram uses the ItemInformationAdorner Control to visualize information regarding the position, size and rotation angle of its shapes. This control switches tree predefined DataTemplates at runtime depending on the user’s actions. To do this the ItemInformationAdorner exposes the InformationTipTemplateSelector property. It is of type DataTemplateSelector and can be used to get or set an instance of custom data template selector. For your convenience we ship ready to use selector in our suite and the RadDiagram uses it by default. In order to customize how the information is presented, you only need to define the SizeChangedTemplate, PositionChangedTemplate and RotationChangedTemplate properties of the built-in InformationTipTemplateSelector and assign it to the ItemInformationAdorner.InformationTipTemplateSelector property. In order to change the predefined DataTemplateSelector you can use the following Style

<Style TargetType="primitives:ItemInformationAdorner">
    <Setter Property="InformationTipTemplateSelector" Value="{StaticResource informationTemplateSelector}" />
</Style>

Where the primitives namespace is defined like this:

xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"

And the StaticResource is defined like this:

<primitives:InformationTipTemplateSelector x:Key="informationTemplateSelector" 
                                           PositionChangedTemplate="{StaticResource PositionTipTemplate}" 
                                           RotationChangedTemplate="{StaticResource RotationTipTemplate}" 
                                           SizeChangedTemplate="{StaticResource SizeTipTemplate}" />

As the names of the properties imply the PositionChangedTemplate will be selected when the position of a shape is changed. It will visualize the X and Y component of the current position of the shape. The RotationChangedTemplate will be visualized when the shape is rotated and it will visualize the angle that the shape is rotated to. The SizeChangedTemplate will be visualized when the shape is resized. That template visualizes the current Width and Height of the corresponding shape. In Figure 1 you can see how the default templates look like in our Windows8 theme.
Figure 1:

Rad Diagram How To Customiza Item Information Adorner

In order to customize all three templates you can first extract the default ones and use them as starting point. You can find more information about extracting default ControlTemplates in this article Below you can find the default Styles and DataTemplates used by the RadDiagram.

<Style x:Key="infoTipPanel" TargetType="StackPanel">
    <Setter Property="Orientation" Value="Horizontal" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="10 2" />
</Style>
<Style x:Key="PositionTipTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<DataTemplate x:Key="PositionTipTemplate">
    <StackPanel Style="{StaticResource infoTipPanel}">
        <TextBlock Style="{StaticResource PositionTipTextBlockStyle}" Text="{telerik:LocalizableResource Key=PositionX}" />
        <TextBlock Margin="2 0 0 0" Text="{Binding Path=X, StringFormat=n2}" />
        <TextBlock Margin="5,0,0,0"
                   Style="{StaticResource PositionTipTextBlockStyle}"
                   Text="{telerik:LocalizableResource Key=PositionY}" />
        <TextBlock Margin="2 0 0 0"
                   Text="{Binding Path=Y,
                                  StringFormat=n2}" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="RotationTipTemplate">
    <StackPanel Style="{StaticResource infoTipPanel}">
        <TextBlock Style="{StaticResource PositionTipTextBlockStyle}" Text="{telerik:LocalizableResource Key=RotationAngle}" />
        <TextBlock Margin="2 0 0 0"
                   Text="{Binding Path=.,
                                  StringFormat=n0}" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="SizeTipTemplate">
    <StackPanel Style="{StaticResource infoTipPanel}">
        <TextBlock Style="{StaticResource PositionTipTextBlockStyle}" Text="{telerik:LocalizableResource Key=Width}" />
        <TextBlock Margin="2 0 0 0" Text="{Binding Width, StringFormat=n2}" />
        <TextBlock Margin="5 0 0 0"
                   Style="{StaticResource PositionTipTextBlockStyle}"
                   Text="{telerik:LocalizableResource Key=Height}" />
        <TextBlock Margin="2 0 0 0"
                   Text="{Binding Height,
                                  StringFormat=n2}" />
    </StackPanel>
</DataTemplate>
<primitives:InformationTipTemplateSelector x:Key="informationTemplateSelector"
                                           PositionChangedTemplate="{StaticResource PositionTipTemplate}"
                                           RotationChangedTemplate="{StaticResource RotationTipTemplate}"
                                           SizeChangedTemplate="{StaticResource SizeTipTemplate}" />
<Style TargetType="primitives:ItemInformationAdorner">
    <Setter Property="InformationTipTemplateSelector" Value="{StaticResource informationTemplateSelector}" />
</Style>

These Styles and DataTemplates can be used as starting point for your customizations.

Another way to implement the same customizations is to create a new TemplateSelector and use it instead of the provided one. In that custom selector you will be able to implement custom template selecting logic.

  public class MyTemplateSelector:DataTemplateSelector
  {
      public DataTemplate SizeTemplate { get; set; }
      public DataTemplate PositionTemplate { get; set; }
      public DataTemplate RotationTemplate { get; set; }

      public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
      {
          if (item is System.Windows.Point)
          {
              return this.PositionTemplate;
          }
          else if (item is System.Windows.Size)
          {
              return this.SizeTemplate;
          }
          else if(item is double)
          {
              return this.RotationTemplate;
          }
          else
          {
              return null;
          }
      }
  }
  Public Class MyTemplateSelector
    Inherits DataTemplateSelector
    Public Property SizeTemplate() As DataTemplate
        Get
            Return m_SizeTemplate
        End Get
        Set
            m_SizeTemplate = Value
        End Set
    End Property
    Private m_SizeTemplate As DataTemplate
    Public Property PositionTemplate() As DataTemplate
        Get
            Return m_PositionTemplate
        End Get
        Set
            m_PositionTemplate = Value
        End Set
    End Property
    Private m_PositionTemplate As DataTemplate
    Public Property RotationTemplate() As DataTemplate
        Get
            Return m_RotationTemplate
        End Get
        Set
            m_RotationTemplate = Value
        End Set
    End Property
    Private m_RotationTemplate As DataTemplate

    Public Overrides Function SelectTemplate(item As Object, container As System.Windows.DependencyObject) As System.Windows.DataTemplate
        If TypeOf item Is System.Windows.Point Then
            Return Me.PositionTemplate
        ElseIf TypeOf item Is System.Windows.Size Then
            Return Me.SizeTemplate
        ElseIf TypeOf item Is Double Then
            Return Me.RotationTemplate
        Else
            Return Nothing
        End If
    End Function
End Class

Once defined, you will be able to use this custom TemplateSelector in XAML. You will be able to assign custom DataTemplates to the exposed properties thus selecting your custom templates.

<local:MyTemplateSelector x:Key="MyTemplateSelector"
                          PositionTemplate="{StaticResource MyPositionTemplate}"
                          RotationTemplate="{StaticResource MyRotationTemplate}"
                          SizeTemplate="{StaticResource MySizeTemplate}" />

<Style TargetType="primitives:ItemInformationAdorner">
    <Setter Property="InformationTipTemplateSelector" Value="{StaticResource MyTemplateSelector}" />
</Style>

The ItemInformationAdorner control can also be used to visualize additional content for the diagram items. This can be done by using the AdditionalContent attached property. This property is of type object and gets or sets the content to be visualized. In order for this property to work you should set it to the RadDiagram. What this means for your application is that all the shapes, containers and connections will visualize the same object whenever a RadDiagramItem is selected. A bright example of taking advantage of this property is the button which opens the SettingsPane extension control. Figure 2 visualizes the mentioned button.
Figure 2:

Rad Diagram How To Customiza Item Information Adorner 2

The Visibility of the content set as additional is internally controlled by the Boolean IsAdditionalContentVisible property. It exposes only a getter, so that you will be able to keep track of the current state of the content.

Also, the ItemInformationAdorner control exposes the IsAdditionalContentVisibleChanged event. It can be used to trigger custom logic whenever the AdditionalContent is visualized or hidden.