Diagram Customization Questions

[Alan]

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.

Thanks,
 Alan

[Petar Mladenov]

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">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
                                                Storyboard.TargetName="ConnectorsControl"
                                                Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

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}" />
           </Style>

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}" />
               </StackPanel>
           </DataTemplate>

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">
            <Setter.Value>
                <ControlTemplate TargetType="primitives:ManipulationAdorner">
                    <Grid>
                        <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"
                                HorizontalAlignment="Left">
                            <ToolTipService.ToolTip>
                                <ToolTip telerik:LocalizationManager.ResourceKey="Diagram_Resize"></ToolTip>
                            </ToolTipService.ToolTip>
                        </Rectangle>

                        <Rectangle x:Name="TopRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                Margin="{StaticResource ManipulationAdornerThicknessT}" VerticalAlignment="Top"
                                HorizontalAlignment="Right">
                            <ToolTipService.ToolTip>
                                <ToolTip telerik:LocalizationManager.ResourceKey="Diagram_Resize"></ToolTip>
                            </ToolTipService.ToolTip>

All the best,
Petar Mladenov
the Telerik team

[Alan]

Petar,

Thanks, all of this works great.

Alan