<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="PlantUmlEditor.MainWindow"
xmlns:plantuml="clr-namespace:PlantUmlEditor"
xmlns:DesignTimeData="clr-namespace:PlantUmlEditor.DesignTimeData"
xmlns:customAnimation="clr-namespace:PlantUmlEditor.CustomAnimation"
Title="PlantUml Editor" Height="700" Width="740" WindowStartupLocation="CenterScreen"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{DynamicResource MainBackgroundBrush}" Loaded="Window_Loaded">
<Window.Resources>
<ResourceDictionary>
<plantuml:DoubleToGridLengthConverter x:Key="doubleToGridLengthConverter" />
<plantuml:UriToCachedImageConverter x:Key="uriToImageConverter" />
<DesignTimeData:DiagramFiles x:Key="DesignTimeDiagramFiles" />
<!--
Animation for collapsing and expanding the left column with file
list box when user goes to diagram edit mode
-->
<Storyboard x:Key="CollapseTheDiagramListBox">
<customAnimation:GridLengthAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="LeftColumn"
From="{Binding Path=Width, ElementName=LeftColumn}"
To="120"
Duration="0:0:0.5"
AutoReverse="False"
AccelerationRatio="0.8"/>
</Storyboard>
<Storyboard x:Key="ExpandTheDiagramListBox" >
<customAnimation:GridLengthAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="LeftColumn"
From="{Binding Path=Width, ElementName=LeftColumn}"
Duration="0:0:0.5"
AutoReverse="False"
AccelerationRatio="0.8"/>
</Storyboard>
<!--
Custom style for diagram listbox which shows preview of diagram as well as preview of the content
-->
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<Storyboard x:Key="isSelectedTrue_activated">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.3000000"
Value="1.1"
KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.3000000"
Value="1.1"
KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame
KeyTime="00:00:00.3000000"
Value="#FF828282"
KeySpline="0.5,0,0.5,1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="isSelectedTrue_deactivated">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.3000000"
Value="1"
KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.3000000"
Value="1"
KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="{x:Null}"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame
KeySpline="0.5,0,0.5,1"
KeyTime="00:00:00.3000000"
Value="#FF000000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Setter Property="VerticalContentAlignment"
Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Margin"
Value="2,2,2,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
SnapsToDevicePixels="true"
x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Foreground"
Value="White"/>
<Setter Property="Background"
Value="Black"
TargetName="Bd"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="true"/>
<Condition Property="Selector.IsSelectionActive"
Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsSelected"
Value="False"/>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform
ScaleX="1" ScaleY="1"/>
<SkewTransform
AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Selector.IsSelected"
Value="True">
<!--<Trigger.EnterActions>
<BeginStoryboard x:Name="isSelectedTrue_activated_BeginStoryboard" Storyboard="{StaticResource isSelectedTrue_activated}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="isSelectedTrue_deactivated_BeginStoryboard" Storyboard="{StaticResource isSelectedTrue_deactivated}"/>
</Trigger.ExitActions>-->
<Setter Property="Foreground"
Value="#FF000000"/>
</Trigger>
</Style.Triggers>
</Style>
<!--
Custom tab header and tab body style
-->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="Gray"
BorderBrush="Black"
BorderThickness="1,1,1,1"
CornerRadius="6,6,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="Border"
Property="Background"
Value="black" />
<Setter Property="Foreground"
Value="White" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="4,4,4,1" />
</Trigger>
<Trigger Property="IsSelected"
Value="False">
<Setter TargetName="Border"
Property="Background"
Value="gray" />
<Setter Property="Foreground"
Value="black" />
<Setter TargetName="Border"
Property="Opacity"
Value="0.4" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Rectangle HorizontalAlignment="Stretch"
x:Name="background"
VerticalAlignment="Stretch"
Fill="{DynamicResource MainBackground}"
Stroke="#FF000000"
Margin="1,1,0,0"/>
<!--
First split the whole form into 3 rows, one for header, one for body and one for footer
-->
<Grid Height="Auto"
x:Name="MainGrid3Rows"
Width="Auto"
VerticalAlignment="Stretch"
Margin="5"
HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
HorizontalAlignment="Stretch">
<WrapPanel>
<TextBlock FontFamily="Segoe"
VerticalAlignment="Top"
FontStretch="Condensed"
FontWeight="Thin"
Margin="7,0,0,0">
<Run FontSize="36"
Foreground="#FF9C9C9C"
Text="Plant"/>
<Run FontSize="36"
Foreground="#FFFFFFFF"
Text="UML"/>
<Run Foreground="#55FFFFFF"
FontSize="36"
FontFamily="Segoe"
FontStretch="Condensed"
FontWeight="Thin"
Text="Editor"
/>
</TextBlock>
<TextBlock Foreground="#55FFFFFF"
VerticalAlignment="Center"
FontSize="16"
FontFamily="Segoe"
FontStretch="Condensed"
FontWeight="Thin"
Margin="10"
Text="by"></TextBlock>
<TextBlock
Background="{x:Null}"
Foreground="#55FFFFFF"
VerticalAlignment="Center"
FontSize="16"
FontFamily="Segoe"
FontStretch="Condensed"
FontWeight="Thin" >
<Hyperlink Foreground="#55FFFFFF" x:Name="NameHyperlink" Click="NameHyperlink_Click"
NavigateUri="http://msmvps.com/blogs/omar">Omar AL Zabir</Hyperlink>
</TextBlock>
</WrapPanel>
</StackPanel>
<!--
Then split the body area into 3 columns, left column for file list, middle column for the grid splitter
and the right column for the tabs
-->
<Grid Height="Auto"
x:Name="MiddleGrid3Columns"
Width="Auto"
Grid.Row="1"
Grid.Column="0"
Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"
x:Name="LeftColumn" />
<ColumnDefinition Width="Auto"
MinWidth="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--
This is the left column controls
-->
<Border Grid.Column="0"
Background="{x:Null}"
CornerRadius="0,0,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="300*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--
This is the location box
-->
<StackPanel Grid.Row="0"
Margin="5,5,5,5">
<TextBlock ><Run Text="Location:"/></TextBlock>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
x:Name="DiagramLocationTextBox"
Tag="Path for diagrams..."
Height="24"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Text="Path for diagrams..."
Foreground="Gray"
GotFocus="DiagramLocationTextBox_GotFocus"
LostFocus="DiagramLocationTextBox_LostFocus"
TextChanged="DiagramLocationTextBox_TextChanged" />
<Button Grid.Column="1"
Width="Auto"
Height="26"
Name="BrowseForFile"
Click="BrowseForFile_Click"
Template="{DynamicResource GlassButtonTemplate}" >...</Button>
</Grid>
</StackPanel>
<!--
This is the diagram file listbox
-->
<ListBox Grid.Row="1"
Width="Auto"
ItemContainerStyle="{DynamicResource ListBoxItemStyle1}"
SelectionMode="Extended"
Background="#64404040"
ItemsSource="{StaticResource DesignTimeDiagramFiles}"
x:Name="DiagramFileListBox"
SelectedValuePath="DiagramFilePath"
IsSynchronizedWithCurrentItem="True"
HorizontalContentAlignment="Stretch"
Foreground="Ivory"
BorderBrush="{x:Null}"
Margin="0,0,0,10"
ScrollViewer.CanContentScroll="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VerticalAlignment="Stretch"
MouseDoubleClick="DiagramFileListBox_MouseDoubleClick"
SelectionChanged="DiagramFileListBox_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
</DataTemplate.Resources>
<Border Padding="0,2,0,2"
CornerRadius="2"
x:Name="DiagramItem"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<StackPanel>
<WrapPanel HorizontalAlignment="Stretch"
Margin="0,0,10,0">
<Image MaxWidth="64"
MaxHeight="100"
Source="{Binding Path=ImageFilePath, Converter={StaticResource uriToImageConverter}}"
Margin="3, 5, 10, 0" VerticalAlignment="Top"></Image>
<StackPanel>
<TextBlock Text="{Binding Path=DiagramFileNameOnly}" />
<TextBlock Foreground="White"
TextWrapping="WrapWithOverflow"
Text="{Binding Path=Preview}"
TextTrimming="CharacterEllipsis"
MaxHeight="100"
ClipToBounds="True"
VerticalAlignment="Top" />
</StackPanel>
</WrapPanel>
<Separator Foreground="Green" Opacity="0.5" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Row="2" Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,4">
<Button Height="30" Name="CreateNewDiagram" Template="{DynamicResource GlassButtonTemplate}" Click="CreateNewDiagram_Click">Create New Diagram</Button>
<Button Template="{DynamicResource GlassButtonTemplate}" x:Name="RefreshDiagramList" Content="Refresh Diagram List" Click="RefreshDiagramList_Click" />
</StackPanel>
</Grid>
</Border>
<GridSplitter Grid.Column="1" Height="100" VerticalAlignment="Center" Width="3" HorizontalAlignment="Center" Grid.Row="0" Background="#66808080" />
<!--
This is the tabs on right column
-->
<TabControl
Grid.Column="2"
Name="DiagramTabs"
Background="{x:Null}"
Visibility="Hidden"
ItemsSource="{StaticResource DesignTimeDiagramFiles}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DiagramFileNameOnly}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<plantuml:DiagramViewControl x:Name="DiagramView"
DataContext="{Binding Path=SelectedItem, ElementName=DiagramTabs, Mode=TwoWay}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
OnAfterSave="DiagramViewControl_OnAfterSave"
OnBeforeSave="DiagramViewControl_OnBeforeSave"
OnClose="DiagramViewControl_OnClose"
GotFocus="DiagramView_GotFocus"
LostFocus="DiagramView_LostFocus">
</plantuml:DiagramViewControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
<!--
This is the welcome panel with fancy messages
-->
<Border x:Name="WelcomePanel"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Style="{DynamicResource BorderStyle}"
BorderBrush="{x:Null}"
CornerRadius="0,0,0,0">
<Grid>
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Black"
Opacity="0.6"
RadiusX="0"
RadiusY="0"
StrokeThickness="1" />
<StackPanel>
<TextBlock HorizontalAlignment="Center"
FontSize="20"
FontWeight="Bold"
Margin="0,11,0,10">
<Run Text="Welcome to PlantUML Designer"/></TextBlock>
<Separator HorizontalAlignment="Stretch"
Height="1" />
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Margin="20"
FontSize="14"
VerticalAlignment="Center" >
Enter the path of the folder on the location text box to load the diagrams from a folder.
Or you can just click on "Create New Diagram" to start creating a new diagram.
</TextBlock>
</StackPanel>
</Grid>
</Border>
</Grid>
<!--
This is the bottom row containing status message and progress bar
-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
x:Name="StatusMessage"
Width="Auto"
HorizontalAlignment="Left">
<Run Text="Ready."/></TextBlock>
<ProgressBar
x:Name="StatusProgressBar"
Foreground="LightGreen"
Background="Black"
Minimum="0"
Maximum="100"
Width="215"
IsIndeterminate="True"
Visibility="Hidden"
Grid.ColumnSpan="2"
HorizontalAlignment="Right" />
</Grid>
</Grid>
</Grid>
</Window>
Submit an article or tip