Click here to Skip to main content
12,350,610 members (24,851 online)
Click here to Skip to main content

Stats

950.5K views
42.8K downloads
611 bookmarked
Posted

WPF Diagram Designer: Part 1

, 23 Aug 2008 CPOL
Drag, resize and rotate elements on a Canvas
bin
Media
cross.png
intro.wmv
paint.png
MoveResize.exe
MoveResizeRotate.exe
MoveResizeRotateWithAdorners.exe
DiagramDesignerPart1
MoveResize
Properties
MoveResizeRotate
Properties
Resources
MoveResizeRotateWithAdorners
Adorners
Media
cross.png
intro.wmv
paint.png
Properties
Resources
DragAndResizeControl
bin
Debug
DragAndResizeControl.exe
DragAndResizeControl.csproj.user
Properties
DragResizeRotateItems
DragResizeRotateItems.csproj.user
media
Excavator.png
Graph.png
intro.wmv
iPod.png
Phone.png
Properties
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:DragResizeRotateItems">

  <!-- RotateThumb Style -->
  <Style TargetType="{x:Type s:RotateThumb}">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type s:RotateThumb}">
          <Grid Width="30" Height="30">
            <Path Fill="#AAD0D0DD" Stretch="Fill" Data="M 50,100 A 50,50 0 1 1 100,50 H 50 V 100"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- RotateDecorator Template -->
  <ControlTemplate x:Key="RotateDecoratorTemplate" TargetType="{x:Type Control}">
    <Grid>
      <s:RotateThumb Margin="-18,-18,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
      <s:RotateThumb Margin="0,-18,-18,0" VerticalAlignment="Top" HorizontalAlignment="Right">
        <s:RotateThumb.RenderTransform>
          <RotateTransform Angle="90" />
        </s:RotateThumb.RenderTransform>
      </s:RotateThumb>
      <s:RotateThumb Margin="0,0,-18,-18" VerticalAlignment="Bottom" HorizontalAlignment="Right">
        <s:RotateThumb.RenderTransform>
          <RotateTransform Angle="180" />
        </s:RotateThumb.RenderTransform>
      </s:RotateThumb>
      <s:RotateThumb Margin="-18,0,0,-18" VerticalAlignment="Bottom" HorizontalAlignment="Left">
        <s:RotateThumb.RenderTransform>
          <RotateTransform Angle="270" />
        </s:RotateThumb.RenderTransform>
      </s:RotateThumb>
    </Grid>
  </ControlTemplate>

  <!-- ResizeDecorator Template -->
  <ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
    <Grid SnapsToDevicePixels="True" Opacity="1">
      <s:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0" SnapsToDevicePixels="True"
                     VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
      <s:ResizeThumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0" SnapsToDevicePixels="True"
                     VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
      <s:ResizeThumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0" SnapsToDevicePixels="True"
                     VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
      <s:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4" SnapsToDevicePixels="True"
                     VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
      <s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0" SnapsToDevicePixels="True"
                     VerticalAlignment="Top" HorizontalAlignment="Left"/>
      <s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0" SnapsToDevicePixels="True"
                     VerticalAlignment="Top" HorizontalAlignment="Right"/>
      <s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6" SnapsToDevicePixels="True"
                     VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
      <s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6" SnapsToDevicePixels="True"
                     VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    </Grid>
  </ControlTemplate>

  <!-- DragThumb Template -->
  <ControlTemplate x:Key="DragThumbTemplate" TargetType="{x:Type s:DragThumb}">
    <Rectangle Fill="Transparent"/>
  </ControlTemplate>

  
  <!-- ContentControl template to rotate, drag and resize items -->
  <Style TargetType="ContentControl">
    <Setter Property="MinHeight" Value="50"/>
    <Setter Property="MinWidth" Value="50"/>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="Tag" Value="IsSelected"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
          <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
            <Control Name="PART_RotateDecorator" Template="{StaticResource RotateDecoratorTemplate}" Visibility="Collapsed"/>
            <s:DragThumb Template="{StaticResource DragThumbTemplate}" Cursor="SizeAll"/>
            <Control x:Name="PART_ResizeDecorator" Template="{StaticResource ResizeDecoratorTemplate}" Visibility="Collapsed"/>
            <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
          </Grid>
          <!-- this trigger is for demo purposes only - to simulate selection of items-->
          <ControlTemplate.Triggers>
            <DataTrigger Value="IsSelected" Binding="{Binding RelativeSource={RelativeSource Self},Path=Tag}">
              <Setter TargetName="PART_ResizeDecorator" Property="Visibility" Value="Visible"/>
              <Setter TargetName="PART_RotateDecorator" Property="Visibility" Value="Visible"/>
            </DataTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sukram
Austria Austria
No Biography provided

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 24 Aug 2008
Article Copyright 2008 by sukram
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid