Click here to Skip to main content
12,623,882 members (31,041 online)
Click here to Skip to main content

Stats

654K views
28.1K downloads
474 bookmarked
Posted

WPF Diagram Designer - Part 4

, 26 Mar 2008 CPOL
A Frankenbuild
DiagramDesigner
Controls
DiagramDesigner.csproj.user
Properties
Resources
Images
AlignObjectsBottom.png
AlignObjectsCenteredHorizontal.png
AlignObjectsCenteredVertical.png
AlignObjectsLeft.png
AlignObjectsRight.png
AlignObjectsTop.png
BringForward.png
BringToFront.png
Copy.png
Cut.png
Delete.png
DistributeObjectsHorizontal.png
DistributeObjectsVertical.png
GenericDocument.png
Group.png
OpenFolder.png
Paste.png
PasteBig.png
Print.png
Save.png
SendBackward.png
SendToBack.png
Ungroup.png
Stencils
Styles
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:DiagramDesigner">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Styles/Shared.xaml"/>
        <ResourceDictionary Source="Styles/ToolBar.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    
    <ToolBar x:Key="MyToolbar" Height="120">
        <!--File-->
        <GroupBox Header="File" Style="{StaticResource ToolbarGroup}" Margin="5,3,3,3">
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <Button Margin="3" Width="55" Style="{StaticResource ToolBarButtonBaseStyle}"
                        HorizontalContentAlignment="Center"
                        Command="{x:Static ApplicationCommands.New}"
                        CommandTarget="{Binding ElementName=MyDesigner}">
                    <Button.Content>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="4*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>
                            <Image Source="Images/GenericDocument.png" Width="45"/>
                            <TextBlock Grid.Row="1" Text="New" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                        </Grid>
                    </Button.Content>
                </Button>
                <StackPanel Orientation="Vertical" Margin="0,2,0,2">
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Open}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/OpenFolder.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Open" VerticalAlignment="Center"  Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Save}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Save.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Save" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Print}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Print.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Print" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
            </StackPanel>
        </GroupBox>

        <!--Edit-->
        <GroupBox Header="Edit" Style="{StaticResource ToolbarGroup}" Margin="3">
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <Button Margin="3" Width="55"
                        Style="{StaticResource ToolBarButtonBaseStyle}"
                        Command="{x:Static ApplicationCommands.Paste}"
                        CommandTarget="{Binding ElementName=MyDesigner}">
                    <Button.Content>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="4*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>
                            <Image Source="Images/PasteBig.png" Width="45"/>
                            <TextBlock Grid.Row="1" Text="Paste" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                        </Grid>
                    </Button.Content>
                </Button>
                <StackPanel Orientation="Vertical" Margin="0,2,0,2">
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Cut}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Cut.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Cut" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Copy}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Copy.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Copy" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static ApplicationCommands.Delete}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Delete.png" Width="16"/>
                                <TextBlock Margin="3,0,3,0" Text="Delete" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
            </StackPanel>
        </GroupBox>

        <!--Alignment-->
        <GroupBox Header="Alignment" Style="{StaticResource ToolbarGroup}" Margin="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Vertical">
                    <Border BorderBrush="{StaticResource ToolbarBorderBrush}" BorderThickness="1" CornerRadius="2" Margin="3">
                        <StackPanel Orientation="Horizontal">
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignLeft}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsLeft.png" Width="16"/>
                                </Button.Content>
                            </Button>
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignHorizontalCenters}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsCenteredHorizontal.png" Width="16"/>
                                </Button.Content>
                            </Button>
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignRight}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsRight.png" Width="16"/>
                                </Button.Content>
                            </Button>
                        </StackPanel>
                    </Border>
                    <Border BorderBrush="{StaticResource ToolbarBorderBrush}" BorderThickness="1" CornerRadius="2" Margin="3">
                        <StackPanel Orientation="Horizontal">
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignTop}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsTop.png" Width="16"/>
                                </Button.Content>
                            </Button>
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignVerticalCenters}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsCenteredVertical.png" Width="16"/>
                                </Button.Content>
                            </Button>
                            <Button Padding="5" Style="{StaticResource ToolBarButtonBaseStyle}"
                                    Command="{x:Static s:DesignerCanvas.AlignBottom}"
                                    CommandTarget="{Binding ElementName=MyDesigner}">
                                <Button.Content>
                                    <Image Source="Images/AlignObjectsBottom.png" Width="16"/>
                                </Button.Content>
                            </Button>
                        </StackPanel>
                    </Border>
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Vertical" Margin="5,0,0,0">
                    <Button Margin="3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.DistributeHorizontal}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/DistributeObjectsHorizontal.png" Width="16"/>
                                <TextBlock Margin="3" Text="Horizontal" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.DistributeVertical}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/DistributeObjectsVertical.png" Width="16"/>
                                <TextBlock Margin="3" Text="Vertical" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
                <Line Stroke="{StaticResource ToolbarBorderBrush}" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="20" Stretch="Fill" HorizontalAlignment="Left"
              Margin="3,0,0,0" Grid.Column="1"/>
            </Grid>
        </GroupBox>

        <!--Arrange-->
        <GroupBox Header="Arrange" Style="{StaticResource ToolbarGroup}" Margin="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel>
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.Group}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Group.png" Width="16"/>
                                <TextBlock Margin="3" Text="Group" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.Ungroup}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/Ungroup.png" Width="16"/>
                                <TextBlock Margin="3" Text="Ungroup" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
                <StackPanel Grid.Column="1" Margin="7,0,0,0">
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.BringForward}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/BringForward.png" Width="16"/>
                                <TextBlock Margin="3" Text="Forward" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.BringToFront}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/BringToFront.png" Width="16"/>
                                <TextBlock Margin="3" Text="To Front" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
                <Line Stroke="{StaticResource ToolbarBorderBrush}" 
                      StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="20" 
                      Stretch="Fill" HorizontalAlignment="Left"
                      Grid.Column="1" Margin="3,0,0,0"/>
                <StackPanel Grid.Column="2">
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.SendBackward}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/SendBackward.png" Width="16"/>
                                <TextBlock Margin="3" Text="Backward" VerticalAlignment="Center"  Grid.Column="1"/>
                             </Grid>
                        </Button.Content>
                    </Button>
                    <Button Margin="0,3,0,3" Padding="5" HorizontalContentAlignment="Left"
                            Style="{StaticResource ToolBarButtonBaseStyle}"
                            Command="{x:Static s:DesignerCanvas.SendToBack}"
                            CommandTarget="{Binding ElementName=MyDesigner}">
                        <Button.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Image Source="Images/SendToBack.png" Width="16"/>
                                <TextBlock Margin="3" Text="To Back" VerticalAlignment="Center" Grid.Column="1"/>
                            </Grid>
                        </Button.Content>
                    </Button>
                </StackPanel>
            </Grid>
        </GroupBox>
    </ToolBar>
</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
Web02 | 2.8.161128.1 | Last Updated 26 Mar 2008
Article Copyright 2008 by sukram
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid