Configurable drop-size

Say there are flowchart-items, which need a specific size when they’re dropped. Wouldn’t it be nice if we could configure the dropsize beside the flowchart-design? This tutorial will show how to accomplish this task!

The flowchart-items

In the file FlowChartStencils.xaml you can find a style for each flowchart-item. Now we need an additional property to store our drop-size. Fortunatly WPF provides a mechanism called attached-properties, which we use for this purpose. Follow these steps to create the necessary class:

  1. Create a new file called FlowChartItemExtension.cs
  2. Replace the created class with
    public class FlowChartItemExtension
    {
    	public static readonly DependencyProperty DropWidthProperty =
    		DependencyProperty.RegisterAttached("DropWidth", typeof(double), typeof(FlowChartItemExtension), new PropertyMetadata(default(double)));
    
    	public static void SetDropWidth(UIElement element, double value)
    	{
    		element.SetValue(DropWidthProperty, value);
    	}
    
    	public static double GetDropWidth(UIElement element)
    	{
    		return (double)element.GetValue(DropWidthProperty);
    	}
    
    	public static readonly DependencyProperty DropHeightProperty =
    		DependencyProperty.RegisterAttached("DropHeight", typeof(double), typeof(FlowChartItemExtension), new PropertyMetadata(default(double)));
    
    	public static void SetDropHeight(UIElement element, double value)
    	{
    		element.SetValue(DropHeightProperty, value);
    	}
    
    	public static double GetDropHeight(UIElement element)
    	{
    		return (double)element.GetValue(DropHeightProperty);
    	}
    }
    

As we have created the extension, let’s use it!

  1. Open the file Resources/Stencils/FlowChartStencils.xaml
  2. Search for x:Key="Process"
  3. Add the following two setters
    <Setter Property="s:FlowChartItemExtension.DropHeight" Value="200" />
    <Setter Property="s:FlowChartItemExtension.DropWidth" Value="400" />
    

Use the drop-size

The dropsize will be set, when you begin to drag a toolbox-item. You can find this part in the file ToolboxItem.cs. The used property is dataObject.DesiredSize.

  1. Replace the following code
    // desired size for DesignerCanvas is the stretched Toolbox item size
    double scale = 1.3;
    dataObject.DesiredSize = new Size(panel.ItemWidth * scale, panel.ItemHeight * scale);
    

    with

    double dropWidth = FlowChartItemExtension.GetDropWidth(this.Content as UIElement);
    double dropHeight = FlowChartItemExtension.GetDropHeight(this.Content as UIElement);
    dataObject.DesiredSize = new Size(dropWidth, dropHeight);
    

Please note that the following code requires you to set a DropHeight- and Width on all stencils! You could of course easily modify the code to use the originalone, if the dropsize is not set.