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
    2891 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. UI for WPF is Visual Studio 2017 Ready
  4. 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