内部基础ZoomBox

AIStudio.Wpf.DiagramApp/Views/MainWindow.xaml

@@ -1900,6 +1900,7 @@
                                                Width="180"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Bottom"
+                                               OffSet="True"
                                                DesignerCanvas="{Binding ElementName=diagram}"
                                                MaximumZoomValue="{Binding MaximumZoomValue,Mode=TwoWay}"  
                                                MinimumZoomValue="{Binding MinimumZoomValue,Mode=TwoWay}"  

AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/ZoomViewModel.cs

@@ -13,10 +13,9 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
             Info = "Drag the upper-right scroll bar to make the canvas larger and smaller.";
 
             DiagramViewModel = new DiagramViewModel();
-            DiagramViewModel.PageSizeType = PageSizeType.Custom;
-            DiagramViewModel.PageSize = new Size(double.NaN, double.NaN);
             DiagramViewModel.ColorViewModel = new ColorViewModel();
             DiagramViewModel.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
+            DiagramViewModel.DefaultZoomBox = true;
 
             DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
             DiagramViewModel.DirectAddItemCommand.Execute(node1);

AIStudio.Wpf.DiagramDesigner.Demo/Views/ZoomView.xaml

@@ -11,19 +11,6 @@
         <!-- Diagram Control -->
         <dd:DiagramControl x:Name="diagram" DataContext="{Binding DiagramViewModel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
 
-        <Slider x:Name="zoomSlider"
-                        Minimum="0.5"
-                        Value="{Binding DiagramViewModel.ZoomValue}"
-                        Maximum="2.0"
-                        IsDirectionReversed="False"
-                        IsSnapToTickEnabled="True"
-                        TickFrequency="0.1"
-                        SmallChange="0.1"
-                        LargeChange="0.1"
-                        Width="200"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Top"/>
-
         <controls:TitleControl/>
     </Grid>
 </UserControl>

AIStudio.Wpf.DiagramDesigner/Controls/ZoomBox.cs

@@ -80,6 +80,20 @@ namespace AIStudio.Wpf.DiagramDesigner
 
         #endregion
 
+        public static readonly DependencyProperty OffSetProperty =
+           DependencyProperty.Register(nameof(OffSet), typeof(bool), typeof(ZoomBox), new UIPropertyMetadata(false));
+        public bool OffSet
+        {
+            get
+            {
+                return (bool)GetValue(OffSetProperty);
+            }
+            set
+            {
+                SetValue(OffSetProperty, value);
+            }
+        }
+
         public static readonly DependencyProperty ZoomValueProperty =
             DependencyProperty.Register(nameof(ZoomValue), typeof(double), typeof(ZoomBox), new UIPropertyMetadata(1d));
         public double ZoomValue
@@ -199,6 +213,8 @@ namespace AIStudio.Wpf.DiagramDesigner
         }
 
         private void InvalidateScale(out double scale, out double xOffset, out double yOffset)
+        {
+            if (OffSet)
             {
                 Vector vector = System.Windows.Media.VisualTreeHelper.GetOffset(DesignerCanvas);
                 double w = DesignerCanvas.ActualWidth + vector.X * 2;
@@ -213,6 +229,22 @@ namespace AIStudio.Wpf.DiagramDesigner
                 xOffset = (x - scale * w) / 2;
                 yOffset = (y - scale * h) / 2;
             }
+            else
+            {
+                double w = DesignerCanvas.ActualWidth;
+                double h = DesignerCanvas.ActualHeight;
+
+                // zoom canvas size
+                double x = this.zoomCanvas.ActualWidth;
+                double y = this.zoomCanvas.ActualHeight;
+                double scaleX = x / w;
+                double scaleY = y / h;
+                scale = (scaleX < scaleY) ? scaleX : scaleY;
+                xOffset = (x - scale * w) / 2;
+                yOffset = (y - scale * h) / 2;
+            }
+         
+        }
     }
 }
 

AIStudio.Wpf.DiagramDesigner/UserControls/DiagramControl.xaml

@@ -291,14 +291,6 @@
                 </s:ConnectorContainer>
             </ControlTemplate>
 
-        </ResourceDictionary>
-    </UserControl.Resources>
-    <Border>
-        <Grid>
-            <ItemsControl ItemsSource="{Binding Items}"
-                                ItemContainerStyleSelector="{x:Static s:DesignerItemsControlItemStyleSelector.Instance}">
-                <ItemsControl.Resources>
-
             <!--基础类型-->
             <Style x:Key="designerItemStyle"
                                 TargetType="{x:Type ContentPresenter}">
@@ -820,11 +812,22 @@
                     </Setter.Value>
                 </Setter>
             </Style>
-                </ItemsControl.Resources>
 
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Border>
+        <Control x:Name="control">
+            <Control.Style>
+                <Style TargetType="Control">
+                    <Setter Property="Template">
+                        <Setter.Value>
+                            <ControlTemplate>
+                                <Grid>
+                                    <ItemsControl ItemsSource="{Binding Items}"
+                                ItemContainerStyleSelector="{x:Static s:DesignerItemsControlItemStyleSelector.Instance}">
                                         <ItemsControl.ItemsPanel>
                                             <ItemsPanelTemplate>
-                        <s:DesignerCanvas Loaded="DesignerCanvas_Loaded"
+                                                <s:DesignerCanvas
                                                 Height="{Binding PageSize.Height}"
                                                 Width="{Binding PageSize.Width}"
                                                 ShowGrid="{Binding ShowGrid}"
@@ -841,11 +844,60 @@
                                         </ItemsControl.ItemsPanel>
 
                                     </ItemsControl>
-            <!--<s:ZoomBox x:Name="zoomBox"
+                                </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">
+                                                <ItemsControl x:Name="diagram" ItemsSource="{Binding Items}"
+                                ItemContainerStyleSelector="{x:Static s:DesignerItemsControlItemStyleSelector.Instance}">
+                                                    <ItemsControl.ItemsPanel>
+                                                        <ItemsPanelTemplate>
+                                                            <s:DesignerCanvas
+                                                Height="{Binding PageSize.Height}"
+                                                Width="{Binding PageSize.Width}"
+                                                ShowGrid="{Binding ShowGrid}"
+                                                GridCellSize="{Binding GridCellSize}"
+                                                GridMarginSize="{Binding GridMarginSize}"
+                                                GridColor="{Binding GridColor}"
+                                                Background="{Binding PageBackground,Converter={StaticResource ColorBrushConverter}}"
+                                                AllowDrop="{Binding AllowDrop}">
+                                                                <s:DesignerCanvas.LayoutTransform>
+                                                                    <ScaleTransform ScaleX="{Binding ZoomValue}" ScaleY="{Binding ZoomValue}"  />
+                                                                </s:DesignerCanvas.LayoutTransform>
+                                                            </s:DesignerCanvas>
+                                                        </ItemsPanelTemplate>
+                                                    </ItemsControl.ItemsPanel>
+
+                                                </ItemsControl>
+                                            </ScrollViewer>
+                                            <s:ZoomBox x:Name="zoomBox"
                                                 Width="180"
                                                 HorizontalAlignment="Right"
                                                 VerticalAlignment="Bottom"
-                       Margin="0,0,5,5" />-->
+                                                DesignerCanvas="{Binding ElementName=diagram}"
+                                                MaximumZoomValue="{Binding MaximumZoomValue,Mode=TwoWay}"  
+                                                MinimumZoomValue="{Binding MinimumZoomValue,Mode=TwoWay}"  
+                                                ZoomValue="{Binding ZoomValue,Mode=TwoWay}"
+                                                Margin="0,0,5,5" />  
+
                                         </Grid>
+                                    </ControlTemplate>
+                                </Setter.Value>
+                            </Setter>
+                        </DataTrigger>
+                    </Style.Triggers>
+                </Style>
+            </Control.Style>
+        </Control>
     </Border>
 </UserControl>

AIStudio.Wpf.DiagramDesigner/UserControls/DiagramControl.xaml.cs

@@ -56,25 +56,6 @@ namespace AIStudio.Wpf.DiagramDesigner
             }
         }
 
-        public static readonly DependencyProperty ZoomValueProperty = DependencyProperty.Register(nameof(ZoomValue), typeof(double), typeof(DiagramControl), new UIPropertyMetadata(1d));
-        public double ZoomValue
-        {
-            get
-            {
-                return (double)GetValue(ZoomValueProperty);
-            }
-            set
-            {
-                SetValue(ZoomValueProperty, value);
-            }
-        }
-
-        private void DesignerCanvas_Loaded(object sender, RoutedEventArgs e)
-        {
-            //DesignerCanvas myDesignerCanvas = sender as DesignerCanvas;
-            //zoomBox.DesignerCanvas = myDesignerCanvas;        
-        }
-
         private IDiagramViewModel DiagramViewModel
         {
             get

AIStudio.Wpf.DiagramDesigner/ViewModels/BaseViewModel/DiagramViewModel.cs

@@ -428,6 +428,19 @@ namespace AIStudio.Wpf.DiagramDesigner
             }
         }
 
+        private bool _defaultZoomBox;
+        public bool DefaultZoomBox
+        {
+            get
+            {
+                return _defaultZoomBox;
+            }
+            set
+            {
+                SetProperty(ref _defaultZoomBox, value);
+            }
+        }
+
         private double _delayZoomValue = 1;
         [Browsable(false)]
         public double DelayZoomValue

AIStudio.Wpf.DiagramDesigner/ViewModels/IDiagramViewModel.cs

@@ -265,6 +265,10 @@ namespace AIStudio.Wpf.DiagramDesigner
         {
             get; set;
         }
+        bool DefaultZoomBox
+        {
+            get; set;
+        }
         bool AllowDrop
         {
             get; set;