Diagram Customization Questions

3 posts, 0 answers
  1. Alan
    Alan avatar
    25 posts
    Member since:
    Jan 2013

    Posted 22 Feb 2013 Link to this post

    I am using RadDiagram for my collection of shapes, but need to know how to customize it:
    • Allow selection/resizing (and show the selection & resize handles), but don't display any connectors or allow user to connect one shape to another
    • Change the units displayed during resizing to be something other than pixels (I want inches)
    • Show bounding box around shape when I select it. I have a simple line shape and it is very hard to get the resize controls to show up. I wished it just showed a bounding box selection when I selected it.

    I am willing to do these things in XAML, code-behind or combination of both.

  2. Petar Mladenov
    Petar Mladenov avatar
    2986 posts

    Posted 27 Feb 2013 Link to this post

    Hello Alan,

    Let me go straight to your questions:

    1) You are able to hide the Connectors by editing the default Shape Style. The following StoryBoard can be removed or commented - this way the connectors will always be invisible: 
    <VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">
                                    <VisualState x:Name="ConnectorsAdornerCollapsed" />
                                    <VisualState x:Name="ConnectorsAdornerVisible">
                                            <ObjectAnimationUsingKeyFrames Duration="0"
                                                <DiscreteObjectKeyFrame KeyTime="0">

    2) You can use the InformationTipTemplateSelector property of the ItemInformationAdorner:
    <primitives:InformationTipTemplateSelector x:Key="informationTemplateSelector"
               SizeChangedTemplate="{StaticResource SizeTipTemplate}"
               PositionChangedTemplate="{StaticResource PositionTipTemplate}"
               RotationChangedTemplate="{StaticResource RotationTipTemplate}" />
               <Style TargetType="primitives:ItemInformationAdorner">
                   <Setter Property="InformationTipTemplateSelector" Value="{StaticResource informationTemplateSelector}" />
    It provides 3 Templates - PositionTipTemplate, SIzeTipTemplate and RotationTipTemplate. You can edit the SizeTipTemplate and use a converter to calculate the inches from the given pixels:
    <DataTemplate x:Key="SizeTipTemplate">
                   <StackPanel Style="{StaticResource infoTipPanel}">
                       <TextBlock Style="{StaticResource PositionTipTextBlockStyle}"
                       telerik:LocalizationManager.ResourceKey="Width" />
                       <TextBlock Text="{Binding Width, StringFormat=n2}" />
                       <TextBlock Style="{StaticResource PositionTipTextBlockStyle}"
                       telerik:LocalizationManager.ResourceKey="Height" Margin="5,0,0,0" />
                       <TextBlock Text="{Binding Height, StringFormat=n2}" />
    This selector is extracted in the attached file.

    3) You have to edit both the Shape Style and ManipulationAdorner Style in order to change the way ResizingHandles work:
    <Style TargetType="primitives:ManipulationAdorner" x:Key="ManipulationAdornerStyle">
            <Setter Property="Width" Value="36"/>
            <Setter Property="Height" Value="36"/>
            <Setter Property="Background" Value="{StaticResource DiagramControl_ManipulationAdorner_Background}" />
            <Setter Property="BorderBrush" Value="{StaticResource DiagramControl_ManipulationAdorner_BorderBrush}" />
            <Setter Property="ResizeActivationRadius" Value="{StaticResource ManipulationAdornerResizeActivationRadius}"/>
            <Setter Property="Template">
                    <ControlTemplate TargetType="primitives:ManipulationAdorner">
                            <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
                                    StrokeDashArray="3 3" StrokeThickness="1" IsHitTestVisible="False" />
                            <Rectangle x:Name="TopLeftResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                    Margin="{StaticResource ManipulationAdornerThicknessL}" VerticalAlignment="Top"
                                    <ToolTip telerik:LocalizationManager.ResourceKey="Diagram_Resize"></ToolTip>
                            <Rectangle x:Name="TopRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                    Margin="{StaticResource ManipulationAdornerThicknessT}" VerticalAlignment="Top"
                                    <ToolTip telerik:LocalizationManager.ResourceKey="Diagram_Resize"></ToolTip>

    All the best,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. Alan
    Alan avatar
    25 posts
    Member since:
    Jan 2013

    Posted 15 May 2013 Link to this post


    Thanks, all of this works great.

Back to Top