Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

WPF Diagram Designer: Part 1

, 23 Aug 2008 CPOL
Drag, resize and rotate elements on a Canvas
DiagramDesignerPart1_bin.zip
bin
Media
cross.png
intro.wmv
paint.png
MoveResize.exe
MoveResizeRotate.exe
MoveResizeRotateWithAdorners.exe
DiagramDesignerPart1_src.zip
DiagramDesignerPart1
MoveResize
Properties
Settings.settings
MoveResizeRotate
Properties
Settings.settings
Resources
MoveResizeRotateWithAdorners
Adorners
Media
cross.png
intro.wmv
paint.png
Properties
Settings.settings
Resources
dragandresizecontrol.zip
DragAndResizeControl
bin
Debug
DragAndResizeControl.exe
DragAndResizeControl.csproj.user
Properties
Settings.settings
dragresizerotateitems.zip
DragResizeRotateItems
DragResizeRotateItems.csproj.user
media
Excavator.png
Graph.png
intro.wmv
iPod.png
Phone.png
Properties
Settings.settings
<Window x:Class="DiagramDesigner.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        Title="WPF Diagram Designer"
        Background="#303030"
        Height="600" Width="880">

  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources/DesignerItem.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Window.Resources>

  <Grid>

    <CheckBox Click="OnClick"
              Content=" s e l e c t"
              Margin="20,10,0,0"
              Foreground="LightGray"
              FontFamily="UISegoe"
              FontSize="15"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"/>

    <Canvas x:Name="DesignerCanvas"
            ClipToBounds="True"
            SnapsToDevicePixels="True">

      <!--Ellipse-->
      <ContentControl Width="100"
                      Height="100"
                      Padding="1"
                      Canvas.Left="710"
                      Canvas.Top="300"
                      Style="{StaticResource DesignerItemStyle}">
        <Ellipse IsHitTestVisible="False" >
          <Shape.Fill>
            <RadialGradientBrush Center="0.2, 0.2" GradientOrigin="0.2, 0.2" RadiusX="0.8" RadiusY="0.8">
              <GradientStop Color="LightBlue" Offset="0"/>
              <GradientStop Color="Blue" Offset="0.9"/>
            </RadialGradientBrush>
          </Shape.Fill>
        </Ellipse>
      </ContentControl>

      <!--Ellipse-->
      <ContentControl Width="100"
                      Height="100"
                      Padding="1"
                      Canvas.Left="640"
                      Canvas.Top="320"
                      Style="{StaticResource DesignerItemStyle}">
        <Ellipse IsHitTestVisible="False">
          <Shape.Fill>
            <RadialGradientBrush Center="0.2,0.2" GradientOrigin="0.2,0.2" RadiusX="0.8" RadiusY="0.8">
              <GradientStop Color="Lime" Offset="0"/>
              <GradientStop Color="#FF00AA00" Offset="0.9"/>
            </RadialGradientBrush>
          </Shape.Fill>
        </Ellipse>
      </ContentControl>

      <!--Ellipse-->
      <ContentControl Width="100"
                      Height="100"
                      Padding="1"
                      Canvas.Left="695"
                      Canvas.Top="370"
                      Style="{StaticResource DesignerItemStyle}">
        <Ellipse IsHitTestVisible="False">
          <Shape.Fill>
            <RadialGradientBrush Center="0.2,0.2" GradientOrigin="0.2,0.2" RadiusX="0.8" RadiusY="0.8">
              <GradientStop Color="White" Offset="0"/>
              <GradientStop Color="#FFFF8300" Offset="0.9"/>
            </RadialGradientBrush>
          </Shape.Fill>
        </Ellipse>
      </ContentControl>

      <!--Image-->
      <ContentControl Width="100"
                      Height="100"
                      Canvas.Left="210"
                      Canvas.Top="220"
                      Style="{StaticResource DesignerItemStyle}">
        <Image IsHitTestVisible="False" Stretch="Fill" Source="Media/cross.png"/>
      </ContentControl>

      <!--Image-->
      <ContentControl Width="100"
                      Height="100"
                      Canvas.Left="75"
                      Canvas.Top="385"
                      Style="{StaticResource DesignerItemStyle}">
        <Image IsHitTestVisible="False" Stretch="Fill" Source="Media/paint.png"/>
      </ContentControl>

      <!--Satelite-->
      <ContentControl Width="130"
                      Height="130"
                      Canvas.Left="50"
                      Canvas.Top="75"
                      Style="{StaticResource DesignerItemStyle}">
        <ContentControl.Resources>
          <Storyboard x:Key="OnLoaded" >
            <DoubleAnimation From="0" To="360"
                             AutoReverse="False"
                             RepeatBehavior="Forever"
                             Duration="00:00:20"
                             Storyboard.TargetName="rotation"
                             Storyboard.TargetProperty ="Angle">
            </DoubleAnimation>
          </Storyboard>
        </ContentControl.Resources>
        <Viewbox Stretch="Fill">
          <Label Name="label"
                 RenderTransformOrigin="0.5,0.5"
                 Content=""
                 FontFamily="Webdings"
                 FontSize="200"
                 Foreground="Yellow"
                 IsHitTestVisible="False">
            <Label.RenderTransform>
              <RotateTransform x:Name="rotation"/>
            </Label.RenderTransform>
          </Label>
        </Viewbox>

        <ContentControl.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded}"/>
          </EventTrigger>
        </ContentControl.Triggers>
      </ContentControl>

      <!--Media-->
      <ContentControl Width="130"
                      Height="130"
                      Padding="2"
                      Canvas.Left="640"
                      Canvas.Top="80"
                      Style="{StaticResource DesignerItemStyle}">
        <Grid>
          <Border CornerRadius="5"
                  IsHitTestVisible="False"
                  BorderBrush="#E0E0E0"
                  BorderThickness="0,1,0,0"
                  Background="{DynamicResource FrameBackground}"/>
          <Border BorderBrush="Black"
                  BorderThickness="0,0,0,1"
                  CornerRadius="5" />
          <Border Background="Transparent" CornerRadius="0" Margin="5,5,5,25" IsHitTestVisible="False"/>
          <Border BorderBrush="#E0E0E0" BorderThickness="0,0,1,1" CornerRadius="0" Margin="5,5,5,25"/>
          <Border BorderBrush="#303030" BorderThickness="1,1,0,0" CornerRadius="0" Margin="5,5,5,25">
            <MediaElement IsHitTestVisible="False"
                          Name="mediaElement"
                          Margin="0,0,1,1"
                          Stretch="Fill" >
              <MediaElement.Triggers>
                <EventTrigger RoutedEvent="MediaElement.Loaded">
                  <EventTrigger.Actions>
                    <BeginStoryboard>
                      <Storyboard>
                        <MediaTimeline Source="./media/intro.wmv"
                                       Storyboard.TargetName="mediaElement"
                                       RepeatBehavior="Forever" />
                      </Storyboard>
                    </BeginStoryboard>
                  </EventTrigger.Actions>
                </EventTrigger>
              </MediaElement.Triggers>
            </MediaElement>
          </Border>
        </Grid>
      </ContentControl>

      <!--TextBox-->
      <ContentControl Width="130"
                      Height="130"
                      Padding="2"
                      Canvas.Left="360"
                      Canvas.Top="60"
                      Style="{StaticResource DesignerItemStyle}">
        <Grid>
          <Border CornerRadius="5"
                  IsHitTestVisible="False"
                  BorderBrush="#E0E0E0"
                  BorderThickness="0,1,0,0"
                  Background="{DynamicResource FrameBackground}"/>
          <Border BorderBrush="Black"
                  BorderThickness="0,0,0,1"
                  CornerRadius="5" />
          <Border Background="WhiteSmoke" CornerRadius="5" Margin="5,5,5,25" IsHitTestVisible="False"/>
          <Border BorderBrush="White" BorderThickness="0,0,1,1" CornerRadius="5" Margin="5,5,5,25"/>
          <Border BorderBrush="Black" BorderThickness="1,1,0,0" CornerRadius="5" Margin="5,5,5,25">
            <TextBox FontSize="11"
                     Margin="1,1,0,0"
                     Foreground="DimGray"
                     TextWrapping="Wrap"
                     AcceptsReturn="True"
                     BorderThickness="0"
                     Background="Transparent"
                     Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
          </Border>
        </Grid>
      </ContentControl>

      <!--ECG-->
      <ContentControl Width="130"
                      Height="130"
                      Padding="2"
                      Canvas.Left="380"
                      Canvas.Top="340"
                      Style="{StaticResource DesignerItemStyle}">
        <Grid IsHitTestVisible="False">
          <Border CornerRadius="5"
                  BorderBrush="#E0E0E0"
                  BorderThickness="0,1,0,0"
                  Background="{DynamicResource FrameBackground}"/>
          <Border BorderBrush="Black"
                  BorderThickness="0,0,0,1"
                  CornerRadius="5" />
          <Border Background="{StaticResource MyGridBrushResource}" CornerRadius="5" Margin="5,5,5,25" IsHitTestVisible="False"/>
          <Border BorderBrush="#E0E0E0" BorderThickness="0,0,1,1" CornerRadius="5" Margin="5,5,5,25"/>
          <Border BorderBrush="#303030" BorderThickness="1,1,0,0" CornerRadius="5" Margin="5,5,5,25">
            <Grid>
              <Grid.Resources>
                <Style TargetType="Line">
                  <Setter Property="Stroke" Value="Lime" />
                  <Setter Property="Opacity" Value="0.5" />
                </Style>
                <Storyboard x:Key="OnLoaded">
                  <DoubleAnimation From="0" To="1.0"
                                   RepeatBehavior="Forever"
                                   Duration="00:00:2"
                                   Storyboard.TargetName="backgroundBrush"
                                   Storyboard.TargetProperty="GradientStops[2].Offset">
                  </DoubleAnimation>

                  <DoubleAnimation From="0.01" To="1.01"
                                   RepeatBehavior="Forever"
                                   Duration="00:00:2"
                                   Storyboard.TargetName="backgroundBrush"
                                   Storyboard.TargetProperty ="GradientStops[3].Offset">
                  </DoubleAnimation>
                  <DoubleAnimation From="-0.9" To="0.1"
                                   RepeatBehavior="Forever"
                                   Duration="00:00:2"
                                   Storyboard.TargetName="backgroundBrush"
                                   Storyboard.TargetProperty ="GradientStops[1].Offset">
                  </DoubleAnimation>

                </Storyboard>
              </Grid.Resources>
              <Grid.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                  <BeginStoryboard Storyboard="{StaticResource OnLoaded}"/>
                </EventTrigger>
              </Grid.Triggers>
              <Grid Background="Transparent">
                <Border BorderBrush="#00F300" BorderThickness="0" Margin="10">
                  <Path Name="polyLine" StrokeThickness="1" Stretch="Fill" Margin="5"
                        Data="M 0,10 4,10 6,8 7,10 9,10 10,11, 11,1 12,13 13,10 18,10 21,8 24,10
                                30,10 34,10 36,8 37,10 39,10 40,11, 41,1 42,13 43,10 48,10 51,8 54,10">
                    <Path.Stroke>
                      <LinearGradientBrush x:Name="backgroundBrush" StartPoint="0,0" EndPoint="1,0" SpreadMethod="Repeat">
                        <GradientStop Color="Transparent" Offset ="0.0" />
                        <GradientStop Color="Transparent" Offset ="0.0" />
                        <GradientStop Color="#00FF00" Offset ="0.0"/>
                        <GradientStop Color="Transparent" Offset ="0.0" />
                        <GradientStop Color="Transparent" Offset ="1"/>
                      </LinearGradientBrush>
                    </Path.Stroke>
                  </Path>
                </Border>
              </Grid>
            </Grid>
          </Border>
        </Grid>
      </ContentControl>

    </Canvas>
  </Grid>
</Window>

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

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