Add Size Adorner

In part one of Sukrams WPF Diagram Designer tutorial he shows a nice adorner to display the size of the current item. Unfortunatly this feature is no longer available in part four. If you first look at it, it seems quite complicated to port this feature from part one to part four. But fortunatly it can be done with very few steps!

Screenshot of DesignerItem with resize adorner

Pre-requisites
Download the part one and four of sukrams tutorial.

Implementation of the size-adorner
Please follow the steps below:

  1. Copy the file SizeChrome.cs from the 1st to the 4th part of the tutorial. It contains the class which the ControlTemplate targets and the doubleFormatConverter.
  2. Open the file DesignerItem.cs and search for “PART_ResizeDecorator” – right below this line we insert the  following code, which registers the ControlTemplate as TemplatePart on the DesignerItem:
    [TemplatePart(Name = "PART_SizeDecorator", Type = typeof(SizeChrome))]
    
  3. Open the file DesignerItem.xaml and search for “ResizeDecoratorTemplate” – right below this ControlTemplate insert our SizeDecoratorTemplate-xaml below. It defines the look of the resize-adorner:
    <s:DoubleFormatConverter x:Key="doubleFormatConverter"/>
    <ControlTemplate x:Key="SizeDecoratorTemplate" TargetType="{x:Type s:SizeChrome}">
    	<Grid SnapsToDevicePixels="True">
    			<Path Stroke="Red"
    			StrokeThickness="1"
    			Height="10"
    			VerticalAlignment="Bottom"
    			Margin="-2,0,-2,-15"
    			Stretch="Fill"
    			Data="M0,0 0,10 M 0,5 100,5 M 100,0 100,10"/>
                <TextBlock Text="{Binding Path=Width, Converter={StaticResource doubleFormatConverter}}"
    			Background="White"
    			Padding="3,0,3,0"
    			Foreground="Red"
    			Margin="0,0,0,-18"
    			HorizontalAlignment="Center"
    			VerticalAlignment="Bottom"/>
                <Path Stroke="Red"
    			StrokeThickness="1"
    			Width="10"
    			HorizontalAlignment="Right"
    			Margin="0,-2,-15,-2"
    			Stretch="Fill"
    			Data="M5,0 5,100 M 0,0 10,0 M 0,100 10,100"/>
                <TextBlock Text="{Binding Path=Height, Converter={StaticResource doubleFormatConverter}}"
    			Background="White"
    			Foreground="Red"
    			Padding="3,0,3,0"
    			Margin="0,0,-18,0"
    			HorizontalAlignment="Right"
    			VerticalAlignment="Center">
                <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" CenterX="1" CenterY="0.5"/>
                </TextBlock.LayoutTransform>
                </TextBlock>
    	</Grid>
    </ControlTemplate>
    
  4. In the same file search for
    <!-- PART_ResizeDecorator -->

    Right above this line insert the following xaml, which instantiates the ControlTemplate:

    <!-- PART_SizeDecoratorTemplate -->
    <s:SizeChrome x:Name="PART_SizeDecorator"
    	Visibility="Hidden"
    	Template="{StaticResource SizeDecoratorTemplate}"/>
    
  5. The final step is to make the size-adorner visible, when the DesignerItem is selected. We do this in the same file by adding a new setter to the existing MultiDataTrigger, which is currently used by rge ResizeDecorator. Search for the following
    <Setter TargetName="PART_ResizeDecorator" Property="Visibility" Value="Visible"/>
    

    and right below it add our code to it:

    <Setter TargetName="PART_SizeDecorator" Property="Visibility" Value="Visible"/>
    

That’s it, we successfully added the size-adorner back to the fourth part of the WPF Diagram Designer! A further step might be to make it only visible, when the resize started. I think you’d then inherit the SizeChrome from Thumb instead of control and register events on DragStarted and DragCompleted to show and hide the ControlTemplate. Show and hide was done by creating a DependencyProperty on the DesignerItem and react with a trigger on this DependencyProperty. If too many of you are struggling with this, leave me a message!