prs/prs.desktop/Panels/Quotes/QuoteDiagramControl.xaml

<UserControl x:Class="PRSDesktop.QuoteDiagramControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:PRSDesktop"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
             xmlns:diagram="clr-namespace:Syncfusion.UI.Xaml.Diagram;assembly=Syncfusion.SfDiagram.WPF"
             xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"
             xmlns:dynamicGrid="clr-namespace:InABox.DynamicGrid;assembly=InABox.Wpf"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800" Background="Black">
    <UserControl.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!--Style for Node-->
            <!--<Style TargetType="diagram:Node">
                <Setter Property="ShapeStyle">
                    <Setter.Value>
                        <Style TargetType="Path">
                            <Setter Property="Stretch" Value="Fill"></Setter>
                            <Setter Property="Fill" Value="#FF5B9BD5"></Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>-->

            <!--Style for Connector--><!--
            <Style TargetType="diagram:Connector">
                <Setter Property="TargetDecoratorStyle">
                    <Setter.Value>
                        <Style TargetType="Path">
                            <Setter Property="Stretch" Value="Fill"/>
                            <Setter Property="Fill" Value="Black"/>
                            <Setter Property="Stroke" Value="Black"/>
                            <Setter Property="StrokeThickness" Value="1"/>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="ConnectorGeometryStyle">
                    <Setter.Value>
                        <Style TargetType="Path">
                            <Setter Property="Stretch" Value="Fill"/>
                            <Setter Property="Fill" Value="Black"/>
                            <Setter Property="Stroke" Value="Black"/>
                            <Setter Property="StrokeThickness" Value="1"/>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>-->

            <!--Style for Symbol-->
            <Style TargetType="stencil:Symbol">
                <Setter Property="ToolTip" Value="{Binding Symbol}" />
                <Setter Property="Width" Value="75" />
                <Setter Property="Height" Value="75" />
                <Setter Property="Padding" Value="2" />
                <Setter Property="BorderThickness" Value="0.75" />
                <Setter Property="Background" Value="WhiteSmoke" />
                <Setter Property="BorderBrush" Value="Gray" />
                <Setter Property="Margin" Value="2" />
            </Style>

            <!--Style for Symbol Group-->
            <!--<Style TargetType="stencil:SymbolGroup">
                <Setter Property="FontFamily" Value="Regular"/>
                <Setter Property="Background" Value="#ffffff"/>
                <Setter Property="Foreground" Value="#222222"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <stencil:Header>
                                <stencil:Header.Template>
                                    <ControlTemplate TargetType="stencil:Header">
                                        <Grid>
                                            <Border x:Name="header" Background="#f5f5f5" 
                                            BorderBrush="Black" BorderThickness="1">
                                                <ContentPresenter Margin="10" Content="{Binding}"/>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </stencil:Header.Template>
                            </stencil:Header>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>-->

            <ControlTemplate x:Key="VerticalSplitter">
                <Grid Background="{TemplateBinding Background}" Width="4">
                    <Button x:Name="PART_Left" Visibility="Collapsed" />
                    <Button x:Name="PART_Right" Visibility="Collapsed" />
                    <StackPanel Margin="0" Orientation="Vertical" VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                        <Ellipse Fill="Silver" HorizontalAlignment="Center" Height="2" Width="2" Opacity="1"
                                 Margin="0,2,0,0" />
                    </StackPanel>
                </Grid>
            </ControlTemplate>

            <DataTemplate x:Key="TitleTemplate">
                <DockPanel>
                    <Button BorderThickness="0" Background="Transparent" Click="EditStencil_Click">
                        <Image Source="pack://application:,,,/Resources/pencil.png" Width="24" Height="24"
                               DockPanel.Dock="Left" />
                    </Button>
                    <TextBlock DockPanel.Dock="Left" Margin="5,0,0,0" HorizontalAlignment="Stretch"
                               VerticalAlignment="Center" Text="{Binding}" FontSize="14" FontWeight="DemiBold" />
                </DockPanel>
            </DataTemplate>

            <ControlTemplate TargetType="{x:Type syncfusion:DiagramThumb}" x:Key="ResizerStyleTemplate">
                <Grid>
                    <Rectangle Fill="Transparent" />
                    <Border Height="2" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="0 -3 0 0"
                            x:Name="PART_ReseizerThumb" CornerRadius="7" Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" />
                    <Rectangle x:Name="PART_ResizerBorder" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                               Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                               VerticalAlignment="{TemplateBinding VerticalAlignment}" Fill="Orange" Stroke="OrangeRed"
                               StrokeThickness="1" Margin="7" />
                </Grid>
            </ControlTemplate>

            <Style x:Key="ResizerStyle" TargetType="{x:Type syncfusion:DiagramThumb}">
                <Setter Property="IsTabStop" Value="false" />
                <Setter Property="Background" Value="Orange" />
                <Setter Property="Width" Value="25" />
                <Setter Property="Height" Value="25" />
                <Setter Property="Margin" Value="0 -5 0 0" />
                <Setter Property="Opacity" Value="0.6" />
                <Setter Property="Template" Value="{StaticResource ResizerStyleTemplate}" />
            </Style>

        </ResourceDictionary>


    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="4" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <dynamicGrid:DynamicTabControl x:Name="Stencils" TabStripPlacement="Bottom" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2">

            <dynamicGrid:DynamicTabItem Header="Areas" Padding="5,2">
                <stencil:Stencil
                    x:Name="areas"
                    DisplayMode="Expanded"
                    ShowDisplayModeToggleButton="False"
                    ExpandMode="OneOrMore"
                    SymbolsDisplayMode="NamesUnderIcons"
                    Title="Areas"
                    TitleTemplate="{StaticResource TitleTemplate}">
                    <stencil:Stencil.SymbolGroups>
                        <stencil:SymbolGroups>
                            <stencil:SymbolGroupProvider MappingName="Key" />
                        </stencil:SymbolGroups>
                    </stencil:Stencil.SymbolGroups>
                </stencil:Stencil>
            </dynamicGrid:DynamicTabItem>

            <dynamicGrid:DynamicTabItem Header="Symbols" Padding="5,2">
                <stencil:Stencil
                    x:Name="symbols"
                    DisplayMode="Expanded"
                    ShowDisplayModeToggleButton="False"
                    ExpandMode="OneOrMore"
                    SymbolsDisplayMode="NamesUnderIcons"
                    Title="Symbols"
                    TitleTemplate="{StaticResource TitleTemplate}">
                    <stencil:Stencil.SymbolGroups>
                        <stencil:SymbolGroups>
                            <stencil:SymbolGroupProvider MappingName="Key" />
                        </stencil:SymbolGroups>
                    </stencil:Stencil.SymbolGroups>
                </stencil:Stencil>
            </dynamicGrid:DynamicTabItem>

            <dynamicGrid:DynamicTabItem Header="Connectors" Padding="5,2">
                <stencil:Stencil
                    x:Name="connectors"
                    DisplayMode="Expanded"
                    ShowDisplayModeToggleButton="False"
                    ExpandMode="OneOrMore"
                    SymbolsDisplayMode="NamesUnderIcons"
                    Title="Connectors"
                    TitleTemplate="{StaticResource TitleTemplate}">
                    <stencil:Stencil.SymbolGroups>
                        <stencil:SymbolGroups>
                            <stencil:SymbolGroupProvider MappingName="Key" />
                        </stencil:SymbolGroups>
                    </stencil:Stencil.SymbolGroups>
                </stencil:Stencil>
            </dynamicGrid:DynamicTabItem>
        </dynamicGrid:DynamicTabControl>

        <syncfusion:SfGridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" ResizeBehavior="PreviousAndNext"
                                   Width="4" Background="Transparent" Template="{StaticResource VerticalSplitter}">
            <syncfusion:SfGridSplitter.PreviewStyle>
                <Style TargetType="Control">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Control">
                                <Grid x:Name="Root" Opacity="0.5">
                                    <Rectangle Fill="{TemplateBinding Background}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </syncfusion:SfGridSplitter.PreviewStyle>
        </syncfusion:SfGridSplitter>

        <Border BorderBrush="Gray" BorderThickness="0.75" Grid.Column="2" Grid.Row="0">
            <DockPanel Margin="2">
                <Button x:Name="ScaleButton" DockPanel.Dock="Left" Content="Scale" Click="ScaleButton_Click"
                        Padding="10,0,10,0" />
                <TextBox x:Name="ScaleBox" DockPanel.Dock="Left" Text="1:100" Width="50" TextAlignment="Center"
                         VerticalContentAlignment="Center" Margin="2,0,0,0" IsReadOnly="True" />
                <Button x:Name="TakeOff" DockPanel.Dock="Right" Content="Take Off" Padding="10,0,10,0"
                        Click="TakeOff_Click" />
                <Slider x:Name="Zoom" DockPanel.Dock="Right" Minimum="25" Value="100" Maximum="400" Interval="1"
                        ValueChanged="Zoom_ValueChanged" Width="100" VerticalAlignment="Center" />
                <Label Content="Zoom:" DockPanel.Dock="Right" VerticalContentAlignment="Center" />
                <Label DockPanel.Dock="Left" />
            </DockPanel>
        </Border>

        <local:CustomDiagram x:Name="diagram" Grid.Column="2" Grid.Row="1" Margin="0,2,0,0" BorderBrush="Gray"
                             BorderThickness="0.75" Constraints="Default,Routing">
            <local:CustomDiagram.SnapSettings>
                <syncfusion:SnapSettings SnapConstraints="ShowLines" />
            </local:CustomDiagram.SnapSettings>
            <local:CustomDiagram.PageSettings>
                <syncfusion:PageSettings
                    PageOrientation="Landscape"
                    PageWidth="21.0"
                    PageHeight="29.7"
                    ShowPageBreaks="True"
                    PrintMargin="0"
                    MultiplePage="False" />
            </local:CustomDiagram.PageSettings>
            <local:CustomDiagram.HorizontalRuler>
                <syncfusion:Ruler />
            </local:CustomDiagram.HorizontalRuler>
            <local:CustomDiagram.VerticalRuler>
                <syncfusion:Ruler Orientation="Vertical" />
            </local:CustomDiagram.VerticalRuler>
            <local:CustomDiagram.ScrollSettings>
                <syncfusion:ScrollSettings ScrollLimit="Diagram" />
            </local:CustomDiagram.ScrollSettings>
        </local:CustomDiagram>

    </Grid>
</UserControl>