aistudio-wpf-diagram/AIStudio.Wpf.DiagramDesigner/UserControls/DiagramControl.xaml

<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.DiagramControl"
             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:dd="clr-namespace:AIStudio.Wpf.DiagramDesigner"
             xmlns:converter="clr-namespace:AIStudio.Wpf.DiagramDesigner.Converters"
             xmlns:c="clr-namespace:AIStudio.Wpf.DiagramDesigner.Controls"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors" 
             mc:Ignorable="d" HorizontalAlignment="Center" VerticalAlignment="Center"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/AIStudio.Wpf.DiagramDesigner;component/Themes/DiagramControl.xaml" />
                <ResourceDictionary>
                    <converter:BorderClipConverter x:Key="BorderClipConverter"/>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>


    </UserControl.Resources>
    <Grid>
        <Control x:Name="control">
            <Control.Style>
                <Style TargetType="Control">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <ItemsControl ItemsSource="{Binding Items}"
                                        ItemContainerStyleSelector="{x:Static dd:DesignerItemsControlItemStyleSelector.Instance}">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <dd:DesignerCanvas
                                                    x:Name="canvas"
                                                    Height="{Binding DiagramOption.LayoutOption.PageSize.Height}"
                                                    Width="{Binding DiagramOption.LayoutOption.PageSize.Width}"
                                                    ShowGrid="{Binding DiagramOption.LayoutOption.ShowGrid}"
                                                    GridCellSize="{Binding DiagramOption.LayoutOption.GridCellSize}"
                                                    GridMarginSize="{Binding DiagramOption.LayoutOption.GridMarginSize}"
                                                    GridColor="{Binding DiagramOption.LayoutOption.GridColor}"
                                                    Background="{Binding DiagramOption.LayoutOption.PageBackground,Converter={StaticResource ColorBrushConverter}}"
                                                    AllowDrop="{Binding DiagramOption.LayoutOption.AllowDrop}"
                                                    ClipToBounds="{Binding DiagramOption.LayoutOption.ClipToBounds}"
                                                    AutoGrowth="{Binding DiagramOption.LayoutOption.AutoGrowth}"       
                                                    CornerRadius="{Binding DiagramOption.LayoutOption.CornerRadius}">
                                                    <dd:DesignerCanvas.LayoutTransform>
                                                        <ScaleTransform ScaleX="{Binding ZoomValue}" ScaleY="{Binding ZoomValue}"  />
                                                    </dd:DesignerCanvas.LayoutTransform>
                                                    <dd:DesignerCanvas.Clip>
                                                        <MultiBinding Converter="{StaticResource BorderClipConverter}">
                                                            <Binding ElementName="canvas" Path="ActualWidth" />
                                                            <Binding ElementName="canvas" Path="ActualHeight" />
                                                            <Binding ElementName="canvas" Path="CornerRadius" />
                                                        </MultiBinding>
                                                    </dd:DesignerCanvas.Clip>
                                                </dd:DesignerCanvas>
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding DefaultZoomBox}" Value="true">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Grid>
                                            <ScrollViewer Name="DesignerScrollViewer"
                                                  Background="Transparent"
                                                  HorizontalScrollBarVisibility="Auto"
                                                  VerticalScrollBarVisibility="Auto"
                                                  Focusable="False">
                                                <ItemsControl x:Name="diagram" ItemsSource="{Binding Items}"
                                                    ItemContainerStyleSelector="{x:Static dd:DesignerItemsControlItemStyleSelector.Instance}">
                                                    <ItemsControl.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <dd:DesignerCanvas
                                                                x:Name="canvas"
                                                                Height="{Binding DiagramOption.LayoutOption.PageSize.Height}"
                                                                Width="{Binding DiagramOption.LayoutOption.PageSize.Width}"
                                                                ShowGrid="{Binding DiagramOption.LayoutOption.ShowGrid}"
                                                                GridCellSize="{Binding DiagramOption.LayoutOption.GridCellSize}"
                                                                GridMarginSize="{Binding DiagramOption.LayoutOption.GridMarginSize}"
                                                                GridColor="{Binding DiagramOption.LayoutOption.GridColor}"
                                                                Background="{Binding DiagramOption.LayoutOption.PageBackground,Converter={StaticResource ColorBrushConverter}}"
                                                                AllowDrop="{Binding DiagramOption.LayoutOption.AllowDrop}"
                                                                ClipToBounds="{Binding DiagramOption.LayoutOption.ClipToBounds}"
                                                                AutoGrowth="{Binding DiagramOption.LayoutOption.AutoGrowth}"
                                                                CornerRadius="{Binding DiagramOption.LayoutOption.CornerRadius}">
                                                                <dd:DesignerCanvas.LayoutTransform>
                                                                    <ScaleTransform ScaleX="{Binding ZoomValue}" ScaleY="{Binding ZoomValue}"  />
                                                                </dd:DesignerCanvas.LayoutTransform>
                                                                <dd:DesignerCanvas.Clip>
                                                                    <MultiBinding Converter="{StaticResource BorderClipConverter}">
                                                                        <Binding ElementName="canvas" Path="ActualWidth" />
                                                                        <Binding ElementName="canvas" Path="ActualHeight" />
                                                                        <Binding ElementName="canvas" Path="CornerRadius" />
                                                                    </MultiBinding>
                                                                </dd:DesignerCanvas.Clip>
                                                            </dd:DesignerCanvas>
                                                        </ItemsPanelTemplate>
                                                    </ItemsControl.ItemsPanel>

                                                </ItemsControl>
                                            </ScrollViewer>
                                            <dd:ZoomBox x:Name="zoomBox"
                                                Width="180"
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Bottom"
                                                DesignerCanvas="{Binding ElementName=diagram}"
                                                MaximumZoomValue="{Binding MaximumZoomValue,Mode=TwoWay}"  
                                                MinimumZoomValue="{Binding MinimumZoomValue,Mode=TwoWay}"  
                                                ZoomValue="{Binding ZoomValue,Mode=TwoWay}"
                                                FitViewModel="{Binding FitViewModel}"
                                                Margin="5,0,0,5" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Control.Style>
        </Control>
    </Grid>
</UserControl>