动画demo完成

2026-04-25 10:56:35 +08:00 · 2023-01-27 14:54:03 +08:00
parent 64ea56f01e
commit 72e3efb052
81 changed files with 1211 additions and 503 deletions
--- a/AIStudio.Wpf.DiagramDesigner.Demo/AIStudio.Wpf.DiagramDesigner.Demo.csproj
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/AIStudio.Wpf.DiagramDesigner.Demo.csproj
@@ -16,11 +16,7 @@
  </ItemGroup>

  <ItemGroup>
-    <Folder Include="Views\Algorithms\" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <PackageReference Include="AIStudio.Wpf.Controls" Version="1.1.44" />
+    <PackageReference Include="AIStudio.Wpf.Controls" Version="1.1.45" />
  </ItemGroup>

  <ItemGroup>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Controls/NotDoneYetControl.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Controls/NotDoneYetControl.xaml
@@ -0,0 +1,12 @@
+<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Controls.NotDoneYetControl"
+             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:AIStudio.Wpf.DiagramDesigner.Demo.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+        <TextBlock Text="暂未完成，敬请期待!" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+    </Grid>
+</UserControl>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Controls/NotDoneYetControl.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Controls/NotDoneYetControl.xaml.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.Controls
+{
+    /// <summary>
+    /// NotDoneYetControl.xaml 的交互逻辑
+    /// </summary>
+    public partial class NotDoneYetControl : UserControl
+    {
+        public NotDoneYetControl()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Controls/TitleControl.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Controls/TitleControl.xaml
@@ -3,19 +3,10 @@
             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:AIStudio.Wpf.DiagramDesigner.Demo.Controls"
+             xmlns:ac="https://gitee.com/akwkevin/AI-wpf-controls" 
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-        <Border MaxWidth="350" Margin="10" HorizontalAlignment="Right" VerticalAlignment="Bottom" BorderBrush="#b8daff" BorderThickness="1" Background="#cce5ff" CornerRadius="3" IsHitTestVisible="False">
-            <Grid>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition Height="Auto"/>
-                </Grid.RowDefinitions>
-                <TextBlock FontSize="18" Text="{Binding Title}" Margin="10" Foreground="#004085"/>
-                <TextBlock Grid.Row="1" Text="{Binding Info}" Margin="10,0,10,10" TextWrapping="WrapWithOverflow" Foreground="#004085" />
-            </Grid>
-        </Border>
-    </Grid>
+    <ac:OptionsPanel HeaderText="{Binding Title}" HorizontalAlignment="Right" VerticalAlignment="Top" BorderBrush="#b8daff" BorderThickness="1" Background="#cce5ff" ac:ControlAttach.CornerRadius="3">
+        <TextBlock MaxWidth="350" Grid.Row="1" Text="{Binding Info}" Margin="10" TextWrapping="WrapWithOverflow" Foreground="#004085" />
+    </ac:OptionsPanel>
 </UserControl>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/MainWindow.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/MainWindow.xaml
@@ -14,9 +14,20 @@
            <ColumnDefinition Width="Auto" MinWidth="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
-        <ListBox x:Name="listbox" SelectionChanged="ListBox_SelectionChanged">
+        <!--<ListBox x:Name="listbox" SelectionChanged="ListBox_SelectionChanged">

-        </ListBox>
+        </ListBox>-->
+        <TreeView x:Name="treeview" 
+                  Style="{StaticResource AIStudio.Styles.TreeView.Menu}"
+                  SelectedItemChanged="treeview_SelectedItemChanged">
+            <TreeView.ItemTemplate>
+                <HierarchicalDataTemplate DataType="{x:Type ac:HamburgerTreeMenuGlyphItem}" ItemsSource="{Binding Path=Children}">
+                    <Grid Margin="5">
+                        <TextBlock VerticalAlignment="Center" Text="{Binding Title}" />
+                    </Grid>
+                </HierarchicalDataTemplate>
+            </TreeView.ItemTemplate>
+        </TreeView>
        <GridSplitter Width="2"
                      VerticalAlignment="Stretch" />
        <ContentControl x:Name="ContentControl"
--- a/AIStudio.Wpf.DiagramDesigner.Demo/MainWindow.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/MainWindow.xaml.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -35,17 +36,75 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo
            assembly.GetTypes().Where(x => x.Namespace.StartsWith("AIStudio.Wpf.DiagramDesigner.Demo.ViewModels") && x.Name.Contains("ViewModel")).ToList().ForEach(x => _viewModelDic.Add(x.Name.Remove(x.Name.Length - 9), x));
        }
        #endregion
-
+        List<MenuItemViewModel> _menus;
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += MainWindow_Loaded;
-            listbox.ItemsSource = _viewDic.Keys.ToList();
+
+            _menus = new List<MenuItemViewModel>()
+            {
+                new MenuItemViewModel(){Title = "Simple"},
+                new MenuItemViewModel(){Title = "Locked"},
+                new MenuItemViewModel(){Title = "Events"},
+                new MenuItemViewModel(){Title = "DynamicInsertions"},
+                new MenuItemViewModel(){Title = "Performance"},
+                new MenuItemViewModel(){Title = "Zoom"},
+                new MenuItemViewModel(){Title = "SnapToGrid"},
+                new MenuItemViewModel(){Title = "DragAndDrop"},
+                new MenuItemViewModel(){Title = "Nodes",
+                    Children=new List<MenuItemViewModel>
+                    {
+                        new MenuItemViewModel(){Title = "Svg"},
+                        new MenuItemViewModel(){Title = "Portless"},
+                    }
+                },
+                new MenuItemViewModel(){Title = "Links",
+                    Children=new List<MenuItemViewModel>
+                    {
+                        new MenuItemViewModel(){Title = "Snapping"},
+                        new MenuItemViewModel(){Title = "Labels"},
+                        new MenuItemViewModel(){Title = "Vertices"},
+                        new MenuItemViewModel(){Title = "Markers"},
+                        new MenuItemViewModel(){Title = "Routers"},
+                        new MenuItemViewModel(){Title = "PathGenerators"},
+                    }
+                },
+                new MenuItemViewModel(){Title = "Groups",
+                    Children=new List<MenuItemViewModel>
+                    {
+                        new MenuItemViewModel(){Title = "Grouping"},
+                    }
+                },
+                new MenuItemViewModel(){Title = "Customization",
+                    Children=new List<MenuItemViewModel>
+                    {
+                        new MenuItemViewModel(){Title = "CustomNode"},
+                        new MenuItemViewModel(){Title = "CustomLink"},
+                        new MenuItemViewModel(){Title = "CustomPort"},
+                        new MenuItemViewModel(){Title = "CustomGroup"},
+                    }
+                },
+                new MenuItemViewModel(){Title = "Algorithms",
+                    Children=new List<MenuItemViewModel>
+                    {
+
+                    }
+                },
+                new MenuItemViewModel(){Title = "Animations",
+                    Children=new List<MenuItemViewModel>
+                    { 
+                        new MenuItemViewModel(){Title = "PathAnimation"},
+                        new MenuItemViewModel(){Title = "LineAnimation"},
+                    }
+                },
+            };
+            treeview.ItemsSource = _menus;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
-            listbox.SelectedIndex = 0;
+            treeview.SelectObject(_menus.FirstOrDefault());
        }

        private void Button_Click(object sender, RoutedEventArgs e)
@@ -74,17 +133,33 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo
                ContentControl.Content = control;
            }
            else
-                ContentControl.Content = null;
+            {
+                ContentControl.Content = new Controls.NotDoneYetControl();
+            }
        }

-        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        private void treeview_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            if (!IsLoaded)
                return;

-            var tag = listbox.SelectedItem as string;
-
-            ShowContent(tag);
+            if (e.NewValue is MenuItemViewModel menuItemViewModel && menuItemViewModel.Children == null)
+            {
+                ShowContent(menuItemViewModel.Title);
+            }
        }
    }
-}
+
+    public class MenuItemViewModel
+    {
+        public string Title
+        {
+            get; set;
+        }
+
+        public List<MenuItemViewModel> Children
+        {
+            get; set;
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Algorithms/ReconnectLinksToClosestPortsViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Algorithms/ReconnectLinksToClosestPortsViewModel.cs
@@ -12,26 +12,26 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
        {
            Title = "Reconnect links";
            Info = "An example of reconnecting links to the closest ports.";
-
-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
+                      
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            ReconnectLinksCommand = new SimpleCommand(ReconnectLinks);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Animations/LineAnimationViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Animations/LineAnimationViewModel.cs
@@ -0,0 +1,43 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
+{
+    class LineAnimationViewModel : BaseViewModel
+    {
+        public LineAnimationViewModel()
+        {
+            Title = "Line Animation";
+            Info = "Line path motion animationr.";
+
+            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;
+
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node1);
+
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node2);
+
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node3);
+
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            connector1.ColorViewModel.LineDashStyle = LineDashStyle.Dash1;
+            connector1.ColorViewModel.LineAnimation = LineAnimation.DashAnimation;
+            DiagramViewModel.DirectAddItemCommand.Execute(connector1);
+
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            connector2.ColorViewModel.LineDashStyle = LineDashStyle.Dash1;
+            connector2.ColorViewModel.LineAnimation = LineAnimation.DashAnimation;
+            DiagramViewModel.DirectAddItemCommand.Execute(connector2);
+
+            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Animations/PathAnimationViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Animations/PathAnimationViewModel.cs
@@ -0,0 +1,41 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
+{
+    class PathAnimationViewModel : BaseViewModel
+    {
+        public PathAnimationViewModel()
+        {
+            Title = "Path Animation";
+            Info = "Line flow motion animation.";
+
+            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;
+
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node1);
+
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node2);
+
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
+            DiagramViewModel.DirectAddItemCommand.Execute(node3);
+
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            connector1.ColorViewModel.LineAnimation = LineAnimation.PathAnimation;
+            DiagramViewModel.DirectAddItemCommand.Execute(connector1);
+
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            connector2.ColorViewModel.LineAnimation = LineAnimation.PathAnimation;
+            DiagramViewModel.DirectAddItemCommand.Execute(connector2);
+
+            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Base/BaseViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Base/BaseViewModel.cs
@@ -6,14 +6,6 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
 {
    class BaseViewModel : BindableBase
    {
-        protected IDiagramServiceProvider _service
-        {
-            get
-            {
-                return DiagramServicesProvider.Instance.Provider;
-            }
-        }
-
        public DiagramViewModel DiagramViewModel
        {
            get; set;
@@ -28,15 +20,5 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
        {
            get; set;
        }
-
-        public int Index
-        {
-            get; set;
-        }
-
-        public int ParentIndex
-        {
-            get; set;
-        }
    }
 }
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomDesignerItemViewModel.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomDesignerItemViewModel.xaml
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomLinkViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomLinkViewModel.cs
@@ -6,29 +6,29 @@ using System.Windows;

 namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
 {
-    class ThickLinkViewModel : BaseViewModel
+    class CustomLinkViewModel : BaseViewModel
    {
-        public ThickLinkViewModel()
+        public CustomLinkViewModel()
        {
            Title = "Custom link";
            Info = "Creating your own custom links is very easy!";
-
-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
+          
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            connector1.ColorViewModel.LineWidth = 6;
            connector1.ColorViewModel.LineColor.BrushType = BrushType.LinearGradientBrush;
            connector1.ColorViewModel.LineColor.GradientStop = new ObservableCollection<GradientStop>();
@@ -36,7 +36,7 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            connector1.ColorViewModel.LineColor.GradientStop.Add(new GradientStop(System.Windows.Media.Colors.Gray, 1)); 
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            connector2.ColorViewModel.LineWidth = 6;
            connector2.ColorViewModel.LineColor.Color = System.Windows.Media.Colors.Blue;
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomNodeViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Customization/CustomNodeViewModel.cs
@@ -13,13 +13,13 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Custom node";
            Info = "Creating your own custom design is very easy!";

-            //_service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();
            DiagramViewModel.CellHorizontalAlignment = CellHorizontalAlignment.Center;
            DiagramViewModel.CellVerticalAlignment = CellVerticalAlignment.Center;
            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;

            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);
@@ -42,7 +42,12 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels

    public class CustomDesignerItemViewModel : DesignerItemViewModelBase
    {
-        public CustomDesignerItemViewModel() : base()
+        public CustomDesignerItemViewModel() : this(null)
+        {
+
+        }
+
+        public CustomDesignerItemViewModel(IDiagramViewModel root) : base(root)
        {

        }
@@ -62,9 +67,9 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            return new DesignerItemBase(this, Answer);
        }

-        protected override void Init()
+        protected override void Init(IDiagramViewModel root)
        {
-            base.Init();
+            base.Init(root);

            this.ItemWidth = 150;
            this.ItemHeight = 80;
@@ -77,9 +82,9 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            connectors.Add(new FullyCreatedConnectorInfo(this, ConnectorOrientation.Bottom));
        }

-        protected override void LoadDesignerItemViewModel(IDiagramViewModel root, SelectableItemBase designerbase)
+        protected override void LoadDesignerItemViewModel(SelectableItemBase designerbase)
        {
-            base.LoadDesignerItemViewModel(root, designerbase);
+            base.LoadDesignerItemViewModel(designerbase);

            if (designerbase is DesignerItemBase designer)
            {
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Groups/GroupingViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Groups/GroupingViewModel.cs
@@ -12,25 +12,25 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Simple";
            Info = "A simple example of AIStudio.Wpf.DiagramDesigner.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            DiagramViewModel.GroupCommand.Execute(new List<DesignerItemViewModelBase> { node1, node2 });
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/LabelsViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/LabelsViewModel.cs
@@ -12,52 +12,52 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Link Labels";
            Info = "Labels help you show more information through out a link. You can specify a distance or an offset." +
                "The content of the labels is still limited because of Blazor's poor SVG support.";
-
-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
+           
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50 };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 50 };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 50, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.AddLabel("Content");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 160, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 160, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 160, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 160, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.AddLabel("0.25", 0.3);
            connector1.AddLabel("0.75", 0.7);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 270, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 270, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 270, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 270, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.AddLabel("50", 50);
            connector1.AddLabel("-50", -50);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 380, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 380, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 380, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 380, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.AddLabel("(0,-20)", 50, new Point(0, -20));
            connector1.AddLabel("(0,20)", -50, new Point(0, 20));
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/MarkersViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/MarkersViewModel.cs
@@ -12,67 +12,67 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Link Markers";
            Info = "Markers are SVG Paths that you can put at the beginning or at the end of your links.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 50, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 50, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.ShapeViewModel.SourceMarker = LinkMarker.Arrow;
            connector1.ShapeViewModel.SinkMarker = LinkMarker.Arrow;
            connector1.AddLabel("Arrow");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 160, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 160, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 160, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 160, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.ShapeViewModel.SourceMarker = LinkMarker.Circle;
            connector1.ShapeViewModel.SinkMarker = LinkMarker.Circle;
            connector1.AddLabel("Circle");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 270, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 270, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 270, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 270, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.ShapeViewModel.SourceMarker = LinkMarker.Square;
            connector1.ShapeViewModel.SinkMarker = LinkMarker.Square;
            connector1.AddLabel("Square");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 380, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 380, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 380, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 380, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.ShapeViewModel.SourceMarker = LinkMarker.NewRectangle(10, 20);
            connector1.ShapeViewModel.SinkMarker = LinkMarker.NewArrow(20, 10);
            connector1.AddLabel("Factory");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 490, Text = "1" };
+            node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 490, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            node2 = new DefaultDesignerItemViewModel() { Left = 400, Top = 490, Text = "2" };
+            node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 490, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+            connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
            connector1.ShapeViewModel.SourceMarker = new LinkMarker("M 0 -8 L 3 -8 3 8 0 8 z M 4 -8 7 -8 7 8 4 8 z M 8 -8 16 0 8 8 z", 16, ArrowPathStyle.Arrow, ArrowSizeStyle.ExtraLarge);
            connector1.ShapeViewModel.SinkMarker = new LinkMarker("M 0 -8 L 8 -8 4 0 8 8 0 8 4 0 z", 8, ArrowPathStyle.Arrow, ArrowSizeStyle.Small);
            connector1.AddLabel("Custom");
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/PathGeneratorsViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/PathGeneratorsViewModel.cs
@@ -13,26 +13,26 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Info = "Path generators are functions that take as input the calculated route and output SVG paths, " +
                "alongside the markers positions and their angles. There are currently two generators: Straight and Smooth.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 80, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 80, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 350, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 350, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 400, Top = 100, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 100, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterNormal);
            connector1.AddLabel("Straight");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            connector2.AddLabel("Smooth");
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/RoutersViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/RoutersViewModel.cs
@@ -13,26 +13,26 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Info = "Routers are functions that take as input the link's vertices and can add points in between. " +
                "There are currently two routers: Normal and Orthogonal.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 80, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 80, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 350, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 350, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 350, Top = 100, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 350, Top = 100, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            connector1.AddLabel("Normal");
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            connector2.AddLabel("Orthogonal");
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/SnappingViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/SnappingViewModel.cs
@@ -12,20 +12,20 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Link Snapping";
            Info = "While dragging a new link, it will try to find (and link) to the closest target within a radius.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();
            DiagramViewModel.PageSizeType = PageSizeType.Custom;
            DiagramViewModel.PageSize = new Size(double.NaN, double.NaN);
            DiagramViewModel.DrawModeViewModel = new DrawModeViewModel() { EnableSnapping = true };
+            DiagramViewModel.ColorViewModel = new ColorViewModel();
+            DiagramViewModel.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/VerticesViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Links/VerticesViewModel.cs
@@ -12,29 +12,29 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Link Vertices";
            Info = "Click on a link to create a vertex. Double click on a vertex to delete it. " +
                "You can drag the vertices around.";
-
-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
+         
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 80, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 80, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 200, Top = 350, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 200, Top = 350, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 400, Top = 100, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 100, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterNormal);
            connector1.AddLabel("Content");
            connector1.AddVertex(new Point(221, 112.5));
            connector1.AddVertex(new Point(111, 291));
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            connector2.AddLabel("Content");
            connector2.AddVertex(new Point(400, 324));
            connector2.AddVertex(new Point(326, 180));
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/LockedViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/LockedViewModel.cs
@@ -15,35 +15,35 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
                    //"All the TOP ports are locked as well, so you can't create links from/to them, but you can from/to the others." +
                    "Newly created links aren't locked, so they can be deleted.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();
            DiagramViewModel.CellHorizontalAlignment = CellHorizontalAlignment.Center;
            DiagramViewModel.CellVerticalAlignment = CellVerticalAlignment.Center;
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            //node1.LockObjectViewModel.LockObject.FirstOrDefault(p => p.LockFlag == LockFlag.All).IsChecked = true;//这个也可以
            node1.IsReadOnly = true;
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            //node2.LockObjectViewModel.LockObject.FirstOrDefault(p => p.LockFlag == LockFlag.All).IsChecked = true;//这个也可以
            node2.IsReadOnly = true;
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            //node3.LockObjectViewModel.LockObject.FirstOrDefault(p => p.LockFlag == LockFlag.All).IsChecked = true;//这个也可以
            node3.IsReadOnly = true;
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            //connector1.LockObjectViewModel.LockObject.FirstOrDefault(p => p.LockFlag == LockFlag.All).IsChecked = true;//这个也可以
            connector1.IsReadOnly = true;
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            // connector2.LockObjectViewModel.LockObject.FirstOrDefault(p => p.LockFlag == LockFlag.All).IsChecked = true;//这个也可以
            connector2.IsReadOnly = true;
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Nodes/SvgViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/Nodes/SvgViewModel.cs
@@ -13,27 +13,27 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Custom node";
            Info = "Creating your own custom design is very easy!";

-            //_service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();
            DiagramViewModel.CellHorizontalAlignment = CellHorizontalAlignment.Center;
            DiagramViewModel.CellVerticalAlignment = CellVerticalAlignment.Center;
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            PathItemViewModel node2 = new PathItemViewModel() { Left = 300, Top = 300, Icon = "M 0 -50 L 50 -50 L 50 -10 A 1 1 0 0 0 50 10 L 50 50 L 0 50 L 0 10 A 1 1 0 0 0 0 -10 Z" };
+            PathItemViewModel node2 = new PathItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Icon = "M 0 -50 L 50 -50 L 50 -10 A 1 1 0 0 0 50 10 L 50 50 L 0 50 L 0 10 A 1 1 0 0 0 0 -10 Z" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            PathItemViewModel node3 = new PathItemViewModel() { Left = 300, Top = 50, Icon = "M 0 -50 L 50 -50 L 50 -10 A 1 1 0 0 0 50 10 L 50 50 L 0 50 L 0 10 A 1 1 0 0 0 0 -10 Z" };
+            PathItemViewModel node3 = new PathItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Icon = "M 0 -50 L 50 -50 L 50 -10 A 1 1 0 0 0 50 10 L 50 50 L 0 50 L 0 10 A 1 1 0 0 0 0 -10 Z" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.TopConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.TopConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.BottomConnector, node3.BottomConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.BottomConnector, node3.BottomConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/PerformanceViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/PerformanceViewModel.cs
@@ -12,22 +12,22 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Performance";
            Info = "This diagram contains 100 nodes and 50 links";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();
            DiagramViewModel.PageSizeType = PageSizeType.Custom;
            DiagramViewModel.PageSize = new Size(1000, 1000);
+            DiagramViewModel.ColorViewModel = new ColorViewModel();
+            DiagramViewModel.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;

            for (int r = 0; r < 10; r++)
            {
                for (int c = 0; c < 10; c += 2)
                {
-                    var node1 = new DefaultDesignerItemViewModel() { Left = 10 + c * 10 + c * 120, Top = 10 + r * 100, Text = $"{r * 10 + c}" };
-                    var node2 = new DefaultDesignerItemViewModel { Left = 10 + (c + 1) * 130, Top = 10 + r * 100, Text = $"{r * 10 + c + 1}" };
+                    var node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 10 + c * 10 + c * 120, Top = 10 + r * 100, Text = $"{r * 10 + c}" };
+                    var node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 10 + (c + 1) * 130, Top = 10 + r * 100, Text = $"{r * 10 + c + 1}" };

                    DiagramViewModel.DirectAddItemCommand.Execute(new List<SelectableDesignerItemViewModelBase> { node1, node2 });

-                    ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector);
+                    ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
                    DiagramViewModel.DirectAddItemCommand.Execute(connector1);
                }
            }
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/SimpleViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/SimpleViewModel.cs
@@ -12,25 +12,25 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Simple";
            Info = "A simple example of AIStudio.Wpf.DiagramDesigner.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/SnapToGridViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/SnapToGridViewModel.cs
@@ -12,27 +12,27 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Snap to Grid";
            Info = "This diagram has a grid size of 100, moving nodes will make them automatically snap.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            DiagramViewModel = new DiagramViewModel();          
            DiagramViewModel.CellHorizontalAlignment = CellHorizontalAlignment.Center;
            DiagramViewModel.CellVerticalAlignment = CellVerticalAlignment.Center;
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/ZoomViewModel.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/ViewModels/ZoomViewModel.cs
@@ -12,25 +12,25 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
            Title = "Zoom";
            Info = "Drag the upper-right scroll bar to make the canvas larger and smaller.";

-            _service.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
-
            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;

-            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel() { Left = 50, Top = 50, Text = "1" };
+            DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
            DiagramViewModel.DirectAddItemCommand.Execute(node1);

-            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel() { Left = 300, Top = 300, Text = "2" };
+            DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
            DiagramViewModel.DirectAddItemCommand.Execute(node2);

-            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel() { Left = 300, Top = 50, Text = "3" };
+            DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
            DiagramViewModel.DirectAddItemCommand.Execute(node3);

-            ConnectionViewModel connector1 = new ConnectionViewModel(node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
+            ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector1);

-            ConnectionViewModel connector2 = new ConnectionViewModel(node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
+            ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, node2.RightConnector, node3.RightConnector, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
            DiagramViewModel.DirectAddItemCommand.Execute(connector2);

            DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Algorithms/ReconnectLinksToClosestPortsView.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Algorithms/ReconnectLinksToClosestPortsView.xaml
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Algorithms/ReconnectLinksToClosestPortsView.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Algorithms/ReconnectLinksToClosestPortsView.xaml.cs
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/LineAnimationView.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/LineAnimationView.xaml
@@ -0,0 +1,16 @@
+<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.LineAnimationView"
+             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="https://gitee.com/akwkevin/aistudio.-wpf.-diagram"
+             xmlns:controls="clr-namespace:AIStudio.Wpf.DiagramDesigner.Demo.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+        <!-- Diagram Control -->
+        <dd:DiagramControl x:Name="diagram" DataContext="{Binding DiagramViewModel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
+
+        <controls:TitleControl/>
+    </Grid>
+</UserControl>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/LineAnimationView.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/LineAnimationView.xaml.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.Views
+{
+    /// <summary>
+    /// LineAnimationView.xaml 的交互逻辑
+    /// </summary>
+    public partial class LineAnimationView : UserControl
+    {
+        public LineAnimationView()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/PathAnimationView.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/PathAnimationView.xaml
@@ -0,0 +1,16 @@
+<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.PathAnimationView"
+             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="https://gitee.com/akwkevin/aistudio.-wpf.-diagram"
+             xmlns:controls="clr-namespace:AIStudio.Wpf.DiagramDesigner.Demo.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+        <!-- Diagram Control -->
+        <dd:DiagramControl x:Name="diagram" DataContext="{Binding DiagramViewModel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
+
+        <controls:TitleControl/>
+    </Grid>
+</UserControl>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/PathAnimationView.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Animations/PathAnimationView.xaml.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.Views
+{
+    /// <summary>
+    /// PathAnimationView.xaml 的交互逻辑
+    /// </summary>
+    public partial class PathAnimationView : UserControl
+    {
+        public PathAnimationView()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomGroupView.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomGroupView.xaml
@@ -0,0 +1,12 @@
+<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.CustomGroupView"
+             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:AIStudio.Wpf.DiagramDesigner.Demo.Views"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomGroupView.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomGroupView.xaml.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace AIStudio.Wpf.DiagramDesigner.Demo.Views
+{
+    /// <summary>
+    /// CustomGroupView.xaml 的交互逻辑
+    /// </summary>
+    public partial class CustomGroupView : UserControl
+    {
+        public CustomGroupView()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomLinkView.xaml
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomLinkView.xaml
@@ -1,4 +1,4 @@
-<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.ThickLinkView"
+<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.CustomLinkView"
             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" 
--- a/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomLinkView.xaml.cs
+++ b/AIStudio.Wpf.DiagramDesigner.Demo/Views/Customization/CustomLinkView.xaml.cs
@@ -16,9 +16,9 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.Views
    /// <summary>
    /// ThickLinkView.xaml 的交互逻辑
    /// </summary>
-    public partial class ThickLinkView : UserControl
+    public partial class CustomLinkView : UserControl
    {
-        public ThickLinkView()
+        public CustomLinkView()
        {
            InitializeComponent();
        }