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:

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:

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.