2025-07-16 12:19

VisionFrame.Base/Controls/CameraBox.xaml

@@ -0,0 +1,25 @@
+<UserControl x:Class="VisionFrame.Base.Controls.CameraBox"
+             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:VisionFrame.Base.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid x:Name="viewport" Background="Transparent"
+   MouseLeftButtonDown="viewport_MouseLeftButtonDown"
+   MouseLeftButtonUp="viewport_MouseLeftButtonUp"
+   MouseRightButtonUp="viewport_MouseRightButtonUp"
+   MouseMove="viewport_MouseMove"
+   MouseLeave="viewport_MouseLeave"
+   MouseWheel="viewport_MouseWheel">
+        <Canvas ClipToBounds="True">
+            <Grid x:Name="imagebox">
+                <Image x:Name="image"/>
+            </Grid>
+            <!--<Rectangle x:Name="rect" Stroke="Red" StrokeThickness="1" Fill="Transparent"/>-->
+            <TextBlock x:Name="rectLabel" Foreground="Green" FontSize="12"/>
+        </Canvas>
+        <TextBlock x:Name="textblock" Foreground="Green" Text="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15"/>
+    </Grid>
+</UserControl>

VisionFrame.Base/Controls/CameraBox.xaml.cs

@@ -0,0 +1,258 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+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 VisionFrame.Base.Controls
+{
+    /// <summary>
+    /// 选框事件数据实体
+    /// </summary>
+    public class RectEventArgs : RoutedEventArgs
+    {
+        public Rect SelectRect { get; }
+        public double X { get; }
+        public double Y { get; }
+        public double Zoom { get; }
+        public RectEventArgs(RoutedEvent routedEvent, object source, Rect selectRect, double x, double y, double zoom)
+            : base(routedEvent, source)
+        {
+            SelectRect = selectRect;
+            X = x;
+            Y = y;
+            Zoom = zoom;
+        }
+    }
+    /// <summary>
+    /// CameraBox.xaml 的交互逻辑
+    /// </summary>
+    public partial class CameraBox : UserControl
+    {
+        /// <summary>
+        /// 图像源
+        /// </summary>
+        public System.Windows.Media.ImageSource ImageSource
+        {
+            get { return (System.Windows.Media.ImageSource)GetValue(ImageSourceProperty); }
+            set { SetValue(ImageSourceProperty, value); }
+        }
+
+        public static readonly DependencyProperty ImageSourceProperty =
+            DependencyProperty.Register("ImageSource", typeof(System.Windows.Media.ImageSource), typeof(CameraBox), new PropertyMetadata(callback));
+
+        private static void callback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is CameraBox box)
+            {
+                var source = e.NewValue as System.Windows.Media.ImageSource;
+                if (source != null)
+                {
+                    box.image.Source = source;
+                }
+            }
+        }
+
+
+        /// <summary>
+        /// 鼠标是否框选图像
+        /// </summary>
+        public bool IsMouseSelect
+        {
+            get { return (bool)GetValue(IsMouseSelectProperty); }
+            set { SetValue(IsMouseSelectProperty, value); }
+        }
+
+        public static readonly DependencyProperty IsMouseSelectProperty =
+            DependencyProperty.Register("IsMouseSelect", typeof(bool), typeof(CameraBox), new PropertyMetadata(false));
+
+        //定义路由事件
+        public static readonly RoutedEvent RectChangedEvent
+            = EventManager.RegisterRoutedEvent("RectChanged",
+                RoutingStrategy.Bubble,
+                typeof(RoutedEventHandler),
+                typeof(CameraBox));
+
+        /// <summary>
+        /// 选框更改事件
+        /// </summary>
+        public event RoutedEventHandler RectChanged
+        {
+            add { AddHandler(RectChangedEvent, value); }
+            remove { RemoveHandler(RectChangedEvent, value); }
+        }
+
+        protected virtual void OnRectChangedEvent(RectEventArgs e)
+        {
+            RaiseEvent(e);
+        }
+
+        //public void ClearSelectRect()
+        //{
+        //    rect.Width = 0;
+        //    rect.Height = 0;
+        //    Canvas.SetLeft(rect, StartPoint.X);
+        //    Canvas.SetTop(rect, StartPoint.Y);
+        //}
+
+        public TransformGroup TransformGroup { get; private set; } = new TransformGroup();
+        private ScaleTransform scaleTransform = new ScaleTransform();//缩放
+        private TranslateTransform translateTransform = new TranslateTransform();//平移
+        private Point MousePoint = new Point(-1, -1);
+        private Point StartPoint = new Point(0, 0);
+        private Point MouseDownPoint = new Point(0, 0);//鼠标按下位置
+        private double scale = 1;//默认放大倍数
+        private int viewportWidth = 0;
+        private int viewportHeight = 0;
+        private int imageBoxWidth = 0;
+        private int imageBoxHeight = 0;
+        private bool mousePressed = false;
+        public double Scale { get; set; } = 1;
+        /// <summary>
+        /// 鼠标框选区域
+        /// </summary>
+        public Rect SelectRect { get; private set; }
+        public CameraBox()
+        {
+            InitializeComponent();
+            Loaded += CameraBox_Loaded;
+        }
+        private void CameraBox_Loaded(object sender, RoutedEventArgs e)
+        {
+            SetTransform();
+            Loaded -= CameraBox_Loaded;//只加载一次SetTransform()
+        }
+
+        /// <summary>
+        /// 根据viewport尺寸，设置图像的缩放和平移
+        /// </summary>
+        private void SetTransform()
+        {
+            TransformGroup.Children.Add(scaleTransform);
+            TransformGroup.Children.Add(translateTransform);
+            imagebox.RenderTransform = TransformGroup;
+            viewportWidth = (int)viewport.ActualWidth;
+            viewportHeight = (int)viewport.ActualHeight;
+            imageBoxWidth = (int)imagebox.ActualWidth;
+            imageBoxHeight = (int)imagebox.ActualHeight;
+
+            scale = Math.Min(1.0 * viewportWidth / imageBoxWidth, 1.0 * viewportHeight / imageBoxHeight);//最初放大比
+            scaleTransform.ScaleX = scale;
+            scaleTransform.ScaleY = scale;
+
+            var translateX = (viewportWidth - imageBoxWidth * scale) / 2;
+            var translateY = (viewportHeight - imageBoxHeight * scale) / 2;
+            translateTransform.X = translateX;
+            translateTransform.Y = translateY;
+            textblock.Text = $"({Math.Round(translateX)},{Math.Round(translateY)}) Zoom:{scale}";
+        }
+
+        //鼠标右键弹起：还原图像
+        private void viewport_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
+        {
+            scaleTransform.ScaleX = scale;//还原最初放大比
+            scaleTransform.ScaleY = scale;
+            var translateX = (viewportWidth - imageBoxWidth * scale) / 2;
+            var translateY = (viewportHeight - imageBoxHeight * scale) / 2;
+            translateTransform.X = translateX;
+            translateTransform.Y = translateY;
+        }
+
+        //鼠标左键按下
+        private void viewport_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        {
+            mousePressed = true;
+            MouseDownPoint = e.GetPosition(viewport);
+
+            ////选框初始位置
+            //StartPoint = e.GetPosition(viewport);
+            //rect.Width = 0;
+            //rect.Height = 0;
+            //Canvas.SetLeft(rect, StartPoint.X);
+            //Canvas.SetTop(rect, StartPoint.Y);
+
+            ////选框坐标显示
+            //rectLabel.Text = string.Empty;
+            //Canvas.SetLeft(rectLabel, StartPoint.X);
+            //Canvas.SetTop(rectLabel, StartPoint.Y);
+            //viewport.CaptureMouse();
+
+        }
+
+
+        //鼠标移动
+        private void viewport_MouseMove(object sender, MouseEventArgs e)
+        {
+            Point point = e.GetPosition(viewport);
+            MousePoint = point;//更新鼠标位置
+            if (!mousePressed)
+                return;
+            if (IsMouseSelect)
+            {
+                ////表示框选图像
+                //rect.Width = point.X - StartPoint.X < 0 ? 0 : point.X - StartPoint.X;
+                //rect.Height = point.Y - StartPoint.Y < 0 ? 0 : point.Y - StartPoint.Y;
+                //SelectRect = new Rect(StartPoint.X, StartPoint.Y, rect.Width, rect.Height);
+                //rectLabel.Text = $"{SelectRect}";
+                //Canvas.SetLeft(rectLabel, SelectRect.X + SelectRect.Width);
+                //Canvas.SetTop(rectLabel, StartPoint.Y);
+                //if (SelectRect.Width + SelectRect.Height == 0)
+                //{
+                //    rectLabel.Text = string.Empty;
+                //}
+            }
+            else
+            {
+                //表示移动图像
+                translateTransform.X += point.X - MouseDownPoint.X;
+                translateTransform.Y += point.Y - MouseDownPoint.Y;
+                MouseDownPoint = point;
+                textblock.Text = $"({Math.Round(translateTransform.X)},{Math.Round(translateTransform.Y)}) Zoom:{scale}";
+            }
+        }
+
+        //鼠标左键弹起
+        private void viewport_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
+        {
+            mousePressed = false;
+            MouseDownPoint = e.GetPosition(viewport);
+            viewport.ReleaseMouseCapture();
+
+            if (IsMouseSelect)
+            {
+                OnRectChangedEvent(new RectEventArgs(RectChangedEvent, this, SelectRect, translateTransform.X, translateTransform.Y, scaleTransform.ScaleX));
+            }
+        }
+
+        private void viewport_MouseLeave(object sender, MouseEventArgs e)
+        {
+            MousePoint = new Point(-1, -1);
+        }
+
+        //放大缩小图像
+        private void viewport_MouseWheel(object sender, MouseWheelEventArgs e)
+        {
+            double scale = e.Delta * 0.0005;
+            Point point = e.GetPosition(viewport);
+            Point inverse = TransformGroup.Inverse.Transform(point);
+            if ((scaleTransform.ScaleX + scale < 0.1) || (scaleTransform.ScaleX + scale > 2))
+            {
+                return;
+            }
+            scaleTransform.ScaleX += scale;
+            scaleTransform.ScaleY += scale;
+            translateTransform.X = -1 * (inverse.X * scaleTransform.ScaleX - point.X);
+            translateTransform.Y = -1 * (inverse.Y * scaleTransform.ScaleY - point.Y);
+            textblock.Text = $"({Math.Round(translateTransform.X)},{Math.Round(translateTransform.Y)}) Zoom:{scale}";
+        }
+    }
+}

VisionFrame.Base/VisionFrame.Base.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net9.0-windows</TargetFramework>

VisionFrame/App.xaml

@@ -7,7 +7,7 @@
         <ResourceDictionary>
 
             <FontFamily x:Key="Iconfont">./Assets/Fonts/#iconfont</FontFamily>
-
+            <FontFamily x:Key="Iconfonts">./Assetss/Fonts/#iconfont</FontFamily>
             <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" x:Key="lgb">
                 <GradientStop Color="#bbd7ff" Offset="0"/>
                 <GradientStop Color="#0FFF" Offset="1"/>

VisionFrame/Assets/Styles/ButtonStyles.xaml

@@ -1,24 +1,24 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-        
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
     <Style TargetType="Button">
-        <Setter Property="Width" Value="50"/>
-        <Setter Property="Height" Value="30"/>
-        <Setter Property="Foreground" Value="White"/>
-        <Setter Property="Background" Value="#1777FF"/>
+        <Setter Property="Width" Value="50" />
+        <Setter Property="Height" Value="30" />
+        <Setter Property="Foreground" Value="White" />
+        <Setter Property="Background" Value="#1777FF" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
-                    <Border Background="{TemplateBinding Background}"
-                        CornerRadius="5">
-                        <Border Background="Transparent" Name="bor">
-                            <ContentPresenter VerticalAlignment="Center"
-                                      HorizontalAlignment="Center" Margin="10,5"/>
+                    <Border Background="{TemplateBinding Background}" CornerRadius="5">
+                        <Border Name="bor" Background="Transparent">
+                            <ContentPresenter
+                                Margin="10,5"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center" />
                         </Border>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="bor" Property="Background" Value="#1000"/>
+                            <Setter TargetName="bor" Property="Background" Value="#1000" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -26,44 +26,48 @@
         </Setter>
     </Style>
 
-    <Style TargetType="Button" x:Key="TitleButtonStyle">
-        <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
-        <Setter Property="Margin" Value="0,5"/>
-        <Setter Property="FontSize" Value="18"/>
-        <Setter Property="FontFamily" Value="{DynamicResource Iconfont}"/>
-        <Setter Property="Foreground" Value="#888"/>
-        <Setter Property="Background" Value="Transparent"/>
+    <Style x:Key="TitleButtonStyle" TargetType="Button">
+        <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
+        <Setter Property="Margin" Value="0,5" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="FontFamily" Value="{DynamicResource Iconfont}" />
+        <Setter Property="Foreground" Value="#888" />
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
                     <Border Background="{TemplateBinding Background}">
-                        <ContentPresenter VerticalAlignment="Center"
-                              HorizontalAlignment="Center" Margin="10,5"/>
+                        <ContentPresenter
+                            Margin="10,5"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center" />
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
         <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
-                <Setter Property="Background" Value="#1000"/>
+                <Setter Property="Background" Value="#1000" />
             </Trigger>
         </Style.Triggers>
     </Style>
 
-    <Style TargetType="Button" x:Key="DeleteElementButtonStyle">
-        <Setter Property="Background" Value="Red"/>
+    <Style x:Key="DeleteElementButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="Red" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
-                    <Border Background="{TemplateBinding Background}"
-                    CornerRadius="20">
-                        <Border Background="Transparent" Name="border" CornerRadius="20">
-                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                    <Border Background="{TemplateBinding Background}" CornerRadius="20">
+                        <Border
+                            Name="border"
+                            Background="Transparent"
+                            CornerRadius="20">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                         </Border>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="#2000"/>
+                            <Setter TargetName="border" Property="Background" Value="#2000" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -71,47 +75,48 @@
         </Setter>
     </Style>
 
-    <Style TargetType="Button" x:Key="ToolButtonStyle">
-        <Setter Property="Margin" Value="3,2"/>
-        <Setter Property="Width" Value="24"/>
-        <Setter Property="FontSize" Value="14"/>
-        <Setter Property="FontFamily" Value="{DynamicResource Iconfont}"/>
-        <Setter Property="Foreground" Value="#888"/>
-        <Setter Property="Background" Value="Transparent"/>
+    <Style x:Key="ToolButtonStyle" TargetType="Button">
+        <Setter Property="Margin" Value="3,2" />
+        <Setter Property="Width" Value="24" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="FontFamily" Value="{DynamicResource Iconfont}" />
+        <Setter Property="Foreground" Value="#888" />
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
-                    <Border Background="{TemplateBinding Background}"
-                            CornerRadius="5">
-                        <ContentPresenter VerticalAlignment="Center"
-                          HorizontalAlignment="Center"/>
+                    <Border Background="{TemplateBinding Background}" CornerRadius="5">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
         <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
-                <Setter Property="Background" Value="#4FFF"/>
+                <Setter Property="Background" Value="#4FFF" />
             </Trigger>
         </Style.Triggers>
     </Style>
 
-    <Style TargetType="ToggleButton" x:Key="ElementArgsButtonStyle">
-        <Setter Property="Background" Value="#156FEE"/>
+    <Style x:Key="ElementArgsButtonStyle" TargetType="ToggleButton">
+        <Setter Property="Background" Value="#156FEE" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
                     <Border Background="{TemplateBinding Background}" CornerRadius="20">
-                        <Border Background="Transparent" Name="border" CornerRadius="20">
-                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                        <Border
+                            Name="border"
+                            Background="Transparent"
+                            CornerRadius="20">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                         </Border>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="#2000"/>
+                            <Setter TargetName="border" Property="Background" Value="#2000" />
                         </Trigger>
                         <Trigger Property="IsChecked" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="#2000"/>
+                            <Setter TargetName="border" Property="Background" Value="#2000" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

VisionFrame/Assets/Styles/ComboBoxStyles.xaml

@@ -1,45 +1,55 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
 
-    <SolidColorBrush x:Key="TextBox.Static.Background" Color="#FFFFFFFF"/>
-    <SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FFACACAC"/>
-    <SolidColorBrush x:Key="ComboBox.Static.Glyph" Color="#FF606060"/>
+    <SolidColorBrush x:Key="TextBox.Static.Background" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FFACACAC" />
+    <SolidColorBrush x:Key="ComboBox.Static.Glyph" Color="#FF606060" />
 
 
     <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
-        <Setter Property="OverridesDefaultStyle" Value="true"/>
-        <Setter Property="IsTabStop" Value="false"/>
-        <Setter Property="Focusable" Value="false"/>
-        <Setter Property="ClickMode" Value="Press"/>
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="IsTabStop" Value="false" />
+        <Setter Property="Focusable" Value="false" />
+        <Setter Property="ClickMode" Value="Press" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ToggleButton}">
-                    <Border x:Name="templateRoot"
-                                Background="{TemplateBinding Background}" 
-                                BorderThickness="{TemplateBinding BorderThickness}" 
-                                BorderBrush="#DDDDDD"
-                                CornerRadius="3">
-                        <Border x:Name="splitBorder" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" 
-                                    SnapsToDevicePixels="true" Margin="0" HorizontalAlignment="Right" 
-                                    BorderThickness="1" BorderBrush="Transparent">
-                            <Path Data="M0 0 4 4 8 0" Stroke="#CCC" StrokeThickness="1"
-                                   VerticalAlignment="Center" Name="path"
-                                  Width="8" HorizontalAlignment="Center"
-                                  RenderTransformOrigin="0.5,0.5"/>
+                    <Border
+                        x:Name="templateRoot"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="#DDDDDD"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="3">
+                        <Border
+                            x:Name="splitBorder"
+                            Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
+                            Margin="0"
+                            HorizontalAlignment="Right"
+                            BorderBrush="Transparent"
+                            BorderThickness="1"
+                            SnapsToDevicePixels="true">
+                            <Path
+                                Name="path"
+                                Width="8"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Data="M0 0 4 4 8 0"
+                                RenderTransformOrigin="0.5,0.5"
+                                Stroke="#CCC"
+                                StrokeThickness="1" />
                         </Border>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="true">
-                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="green"/>
+                            <Setter TargetName="templateRoot" Property="BorderBrush" Value="green" />
                         </Trigger>
                         <Trigger Property="IsKeyboardFocused" Value="true">
-                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="green"/>
+                            <Setter TargetName="templateRoot" Property="BorderBrush" Value="green" />
                         </Trigger>
                         <Trigger Property="IsChecked" Value="True">
                             <Setter TargetName="path" Property="RenderTransform">
                                 <Setter.Value>
-                                    <RotateTransform Angle="180"/>
+                                    <RotateTransform Angle="180" />
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
@@ -52,48 +62,73 @@
     <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
         <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*"/>
-                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
             </Grid.ColumnDefinitions>
-            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2"
-                       IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
-                       Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" 
-                   Placement="Bottom" VerticalOffset="1">
-                <Border x:Name="dropDownBorder" 
-                                BorderBrush="#DDD" 
-                                BorderThickness="1" CornerRadius="5"
-                                Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}" 
-                        MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
-                    <ScrollViewer x:Name="DropDownScrollViewer" 
-                                  Background="Transparent" BorderThickness="0">
+            <Popup
+                x:Name="PART_Popup"
+                Grid.ColumnSpan="2"
+                Margin="1"
+                AllowsTransparency="true"
+                IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                Placement="Bottom"
+                PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
+                VerticalOffset="1">
+                <Border
+                    x:Name="dropDownBorder"
+                    MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
+                    MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                    Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
+                    BorderBrush="#DDD"
+                    BorderThickness="1"
+                    CornerRadius="5">
+                    <ScrollViewer
+                        x:Name="DropDownScrollViewer"
+                        Background="Transparent"
+                        BorderThickness="0">
                         <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
-                            <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
-                                <Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}"
-                                               Height="{Binding ActualHeight, ElementName=dropDownBorder}" 
-                                               Width="{Binding ActualWidth, ElementName=dropDownBorder}"
-                                               RadiusX="7" RadiusY="7"/>
+                            <Canvas
+                                x:Name="canvas"
+                                Width="0"
+                                Height="0"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Top">
+                                <Rectangle
+                                    x:Name="opaqueRect"
+                                    Width="{Binding ActualWidth, ElementName=dropDownBorder}"
+                                    Height="{Binding ActualHeight, ElementName=dropDownBorder}"
+                                    Fill="{Binding Background, ElementName=dropDownBorder}"
+                                    RadiusX="7"
+                                    RadiusY="7" />
                             </Canvas>
-                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" 
-                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
-                                                Margin="3"/>
+                            <ItemsPresenter
+                                x:Name="ItemsPresenter"
+                                Margin="3"
+                                KeyboardNavigation.DirectionalNavigation="Contained"
+                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </Grid>
                     </ScrollViewer>
                 </Border>
             </Popup>
-            <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" 
-                              BorderThickness="{TemplateBinding BorderThickness}" 
-                              Background="White" Grid.ColumnSpan="2" 
-                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                              Style="{StaticResource ComboBoxToggleButton}"/>
-            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
-                                  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
-                                  Content="{TemplateBinding SelectionBoxItem}"
-                                  ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
-                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
-                                  IsHitTestVisible="false" Margin="{TemplateBinding Padding}" 
-                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
-                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+            <ToggleButton
+                x:Name="toggleButton"
+                Grid.ColumnSpan="2"
+                Background="White"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                Style="{StaticResource ComboBoxToggleButton}" />
+            <ContentPresenter
+                x:Name="contentPresenter"
+                Margin="{TemplateBinding Padding}"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding SelectionBoxItem}"
+                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
+                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
+                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
+                IsHitTestVisible="false"
+                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
         </Grid>
         <ControlTemplate.Triggers>
             <!--<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
@@ -101,54 +136,59 @@
                 <Setter Property="Background" TargetName="shadow" Value="#71000000"/>
             </Trigger>-->
             <Trigger Property="HasItems" Value="false">
-                <Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
+                <Setter TargetName="dropDownBorder" Property="Height" Value="95" />
             </Trigger>
             <MultiTrigger>
                 <MultiTrigger.Conditions>
-                    <Condition Property="IsGrouping" Value="true"/>
-                    <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
+                    <Condition Property="IsGrouping" Value="true" />
+                    <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
                 </MultiTrigger.Conditions>
-                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
+                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
             </MultiTrigger>
-            <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
-                <Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
-                <Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
+            <Trigger SourceName="DropDownScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
+                <Setter TargetName="opaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
+                <Setter TargetName="opaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
             </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>
 
     <Style TargetType="{x:Type ComboBox}">
-        <Setter Property="Background" Value="White"/>
-        <Setter Property="Foreground" Value="#333"/>
-        <Setter Property="BorderThickness" Value="1"/>
-        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
-        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
-        <Setter Property="Padding" Value="6,3,5,3"/>
-        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
-        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
-        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
-        <Setter Property="VerticalContentAlignment" Value="Center"/>
-        <Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
+        <Setter Property="Background" Value="White" />
+        <Setter Property="Foreground" Value="#333" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="Padding" Value="6,3,5,3" />
+        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
+        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
+        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template" Value="{StaticResource ComboBoxTemplate}" />
     </Style>
 
     <Style TargetType="ComboBoxItem">
-        <Setter Property="Height" Value="30"/>
+        <Setter Property="Height" Value="30" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ComboBoxItem">
-                    <Border Background="White" BorderBrush="Transparent" BorderThickness="1" CornerRadius="3"
-                            Margin="1" Name="border">
-                        <ContentPresenter VerticalAlignment="Center" Margin="3"/>
+                    <Border
+                        Name="border"
+                        Margin="1"
+                        Background="White"
+                        BorderBrush="Transparent"
+                        BorderThickness="1"
+                        CornerRadius="3">
+                        <ContentPresenter Margin="3" VerticalAlignment="Center" />
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="#111F71E5"/>
-                            <Setter TargetName="border" Property="BorderBrush" Value="#551F71E5"/>
+                            <Setter TargetName="border" Property="Background" Value="#111F71E5" />
+                            <Setter TargetName="border" Property="BorderBrush" Value="#551F71E5" />
                         </Trigger>
                         <Trigger Property="IsSelected" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="#1F71E5"/>
-                            <Setter TargetName="border" Property="BorderBrush" Value="#1F71E5"/>
-                            <Setter Property="Foreground" Value="White"/>
+                            <Setter TargetName="border" Property="Background" Value="#1F71E5" />
+                            <Setter TargetName="border" Property="BorderBrush" Value="#1F71E5" />
+                            <Setter Property="Foreground" Value="White" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

VisionFrame/Assets/Styles/TabControlStyles.xaml

@@ -36,7 +36,7 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="TabItem">
-                    <Grid Background="{TemplateBinding Background}" Height="26">
+                    <Grid Background="{TemplateBinding Background}" Height="30" Margin="0,5,0,0">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="auto"/>
                             <ColumnDefinition/>
@@ -63,7 +63,8 @@
                                  Background="#DFFF"
                                  BorderThickness="0"
                                  Foreground="#1f71e5"
-                                 Margin="0,2">
+                                 Margin="0,2"
+                                 >
                             <TextBox.InputBindings>
                                 <KeyBinding Key="Return"
                                             Command="{Binding AcceptTitleCommand}"/>
@@ -229,7 +230,7 @@
                     <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true"
                           KeyboardNavigation.TabNavigation="Local">
                         <Grid.RowDefinitions>
-                            <RowDefinition Height="26"/>
+                            <RowDefinition Height="35"/>
                             <RowDefinition Height="*"/>
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
@@ -239,8 +240,11 @@
                         <ScrollViewer VerticalScrollBarVisibility="Disabled"
                                       HorizontalScrollBarVisibility="Visible"
                                       Style="{StaticResource TabScrollViewerStyle}">
+                            
                             <TabPanel x:Name="headerPanel" Background="Transparent" 
-                                      IsItemsHost="true" Margin="2,2,2,0" 
+                                     
+                                      Margin="40,0,0,0"
+                                      IsItemsHost="true" 
                                       KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                         </ScrollViewer>
                         <ToggleButton Grid.Column="1" Name="tb_tabs"
@@ -248,7 +252,9 @@
                                       Content="&#xe600;"
                                       FontFamily="{DynamicResource Iconfont}"/>
 
-                        <Border x:Name="contentPanel" Background="{TemplateBinding Background}"
+                        <Border x:Name="contentPanel" 
+                                Margin="0,2"
+                                Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}" 
                                 BorderThickness="{TemplateBinding BorderThickness}" 
                                 Grid.ColumnSpan="2" KeyboardNavigation.DirectionalNavigation="Contained" 

VisionFrame/ViewModels/FlowTabViewModel.cs

@@ -708,7 +708,7 @@ namespace VisionFrame.ViewModels
                             return;
 
 
-                        Thread.Sleep(1000);
+                        //Thread.Sleep(1000);
 
                         stopwatch.Stop();
                         node.Duration = stopwatch.ElapsedMilliseconds;

VisionFrame/ViewModels/MainViewModel.cs

@@ -35,9 +35,7 @@ namespace VisionFrame.ViewModels
         public ObservableCollection<FlowTabViewModel> FlowTabList { get; set; } =
             new ObservableCollection<FlowTabViewModel>()
             {
-                new FlowTabViewModel(){ Title="新建流程(1)"},
-                new FlowTabViewModel(){ Title="新建流程(2)"},
-                new FlowTabViewModel(){ Title="新建流程(3)"},
+                
             };
 
         public ICommand NewFlowCommand { get; set; }
@@ -71,14 +69,6 @@ namespace VisionFrame.ViewModels
                         TargetModel="ImageCapture;ImageCapture.HalconImageNodeModel",
                         W=150,
                         H=34},
-                    new ComponentModel{ Icon="\ue621",Name="Basler"},
-                    new ComponentModel{ Icon="\ue621",Name="康耐视"},
-                    new ComponentModel{ Icon="\ue621",Name="基恩士"},
-                    new ComponentModel{ Icon="\ue621",Name="海康"},
-                    new ComponentModel{ Icon="\ue621",Name="大华"},
-                    new ComponentModel{ Icon="\ue621",Name="大疆/DJI"},
-                    new ComponentModel{ Icon="\ue621",Name="Optronis"},
-                    new ComponentModel{ Icon="\ue621",Name="大恒"},
                 }
             });
             CatalogList.Add(new CatalogModel()

VisionFrame/Views/FlowTabView.xaml

@@ -7,6 +7,7 @@
              xmlns:extensions="clr-namespace:VisionFrame.Extensions"
              xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
              xmlns:n="clr-namespace:VisionFrame.Nodes"
+             xmlns:controls="clr-namespace:VisionFrame.Base.Controls;assembly=VisionFrame.Base"
              xmlns:base="clr-namespace:VisionFrame.Base.TemplateSelector;assembly=VisionFrame.Base"
              xmlns:c="clr-namespace:VisionFrame.Base.Converter;assembly=VisionFrame.Base"
              mc:Ignorable="d" 

VisionFrame/Views/MainView.xaml

@@ -1,65 +1,85 @@
-<Window x:Class="VisionFrame.Views.MainView"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:local="clr-namespace:VisionFrame.Views"
-        mc:Ignorable="d" Name="win"
-        WindowStartupLocation="CenterScreen"
-        FontWeight="ExtraLight"
-        FontSize="12"
-        Title="运动视觉框架" Height="750" Width="1300">
+<Window
+    x:Class="VisionFrame.Views.MainView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:VisionFrame.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Name="win"
+    Title="运动视觉框架"
+    Width="1300"
+    Height="750"
+    FontSize="12"
+    FontWeight="ExtraLight"
+    WindowStartupLocation="CenterScreen"
+    mc:Ignorable="d">
     <WindowChrome.WindowChrome>
-        <WindowChrome NonClientFrameEdges="None" UseAeroCaptionButtons="False"/>
+        <WindowChrome NonClientFrameEdges="None" UseAeroCaptionButtons="False" />
     </WindowChrome.WindowChrome>
     <Window.Background>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
-            <GradientStop Color="#DCEAFC" Offset="0"/>
-            <GradientStop Color="#FFFFFF" Offset="0.5"/>
-            <GradientStop Color="#DCEAFC" Offset="1"/>
+            <GradientStop Offset="0" Color="#DCEAFC" />
+            <GradientStop Offset="0.5" Color="#FFFFFF" />
+            <GradientStop Offset="1" Color="#DCEAFC" />
         </LinearGradientBrush>
     </Window.Background>
     <Window.Resources>
 
-        <ControlTemplate TargetType="RadioButton" x:Key="CatalogButtonTemp">
+        <ControlTemplate x:Key="CatalogButtonTemp" TargetType="RadioButton">
             <Grid>
-                <Border Background="Transparent"
-            Height="40" Margin="0,2"
-            Name="border">
-                    <TextBlock Text="{Binding Icon}"
-                   FontFamily="{StaticResource Iconfont}"
-                   FontSize="22" Foreground="White"
-                   VerticalAlignment="Center"
-                   HorizontalAlignment="Center"/>
+                <Border
+                    Name="border"
+                    Height="40"
+                    Margin="0,2"
+                    Background="Transparent">
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontFamily="{StaticResource Iconfont}"
+                        FontSize="22"
+                        Foreground="White"
+                        Text="{Binding Icon}" />
                 </Border>
-                <Canvas Name="canvas" Visibility="Collapsed" Background="Transparent" 
-                        Width="60">
-                    <Polygon Points="5 0 0 4 5 8"
-                             Fill="#DD1f71e5"
-                             Canvas.Left="50"
-                             Canvas.Top="10"/>
-                    <Border MaxWidth="200" Height="60" Canvas.Left="55"
-                            Background="#DD1f71e5" CornerRadius="5"
-                            TextBlock.Foreground="White">
+                <Canvas
+                    Name="canvas"
+                    Width="60"
+                    Background="Transparent"
+                    Visibility="Collapsed">
+                    <Polygon
+                        Canvas.Left="50"
+                        Canvas.Top="10"
+                        Fill="#DD1f71e5"
+                        Points="5 0 0 4 5 8" />
+                    <Border
+                        Canvas.Left="55"
+                        Height="60"
+                        MaxWidth="200"
+                        Background="#DD1f71e5"
+                        CornerRadius="5"
+                        TextBlock.Foreground="White">
                         <StackPanel Margin="10,0" VerticalAlignment="Center">
-                            <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="0,0,0,5"/>
-                            <Border Height="1" Background="#3FFF"/>
-                            <TextBlock Text="{Binding Description}"
-                                       Foreground="#9FFF"
-                                       TextTrimming="CharacterEllipsis" Margin="0,5,0,0"/>
+                            <TextBlock
+                                Margin="0,0,0,5"
+                                FontWeight="Bold"
+                                Text="{Binding Name}" />
+                            <Border Height="1" Background="#3FFF" />
+                            <TextBlock
+                                Margin="0,5,0,0"
+                                Foreground="#9FFF"
+                                Text="{Binding Description}"
+                                TextTrimming="CharacterEllipsis" />
                         </StackPanel>
                     </Border>
                 </Canvas>
             </Grid>
             <ControlTemplate.Triggers>
                 <Trigger Property="IsMouseOver" Value="True">
-                    <Setter TargetName="border" Property="Background" Value="#2FFF"/>
+                    <Setter TargetName="border" Property="Background" Value="#2FFF" />
                     <!--<Setter TargetName="canvas" Property="Visibility" Value="Visible"/>-->
                     <Trigger.EnterActions>
                         <BeginStoryboard>
                             <Storyboard>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="canvas"
-                                                       Storyboard.TargetProperty="Visibility">
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="canvas" Storyboard.TargetProperty="Visibility">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                         <DiscreteObjectKeyFrame.Value>
                                             <Visibility>Collapsed</Visibility>
@@ -78,8 +98,7 @@
                     <Trigger.ExitActions>
                         <BeginStoryboard>
                             <Storyboard>
-                                <ObjectAnimationUsingKeyFrames 
-                            Storyboard.TargetName="canvas" Storyboard.TargetProperty="Visibility">
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="canvas" Storyboard.TargetProperty="Visibility">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                         <DiscreteObjectKeyFrame.Value>
                                             <Visibility>Collapsed</Visibility>
@@ -91,149 +110,253 @@
                     </Trigger.ExitActions>
                 </Trigger>
                 <Trigger Property="IsChecked" Value="True">
-                    <Setter TargetName="border" Property="Background" Value="#6FFF"/>
+                    <Setter TargetName="border" Property="Background" Value="#6FFF" />
                 </Trigger>
             </ControlTemplate.Triggers>
         </ControlTemplate>
-
+        <Style x:Key="ExpandedButtonStyle" TargetType="ToggleButton">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ToggleButton">
+                        <Border Name="border" Background="Transparent">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="border" Property="Background" Value="#1000" />
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+        <Storyboard x:Key="sb_menu_retract">
+            <DoubleAnimation
+                Storyboard.TargetName="grid_sub_menu"
+                Storyboard.TargetProperty="Width"
+                To="0"
+                Duration="0:0:0.3" />
+        </Storyboard>
+        <Storyboard x:Key="sb_menu_expand">
+            <DoubleAnimation
+                Storyboard.TargetName="grid_sub_menu"
+                Storyboard.TargetProperty="Width"
+                Duration="0:0:0.3" />
+        </Storyboard>
     </Window.Resources>
 
     <Grid ClipToBounds="True">
-        <Ellipse Width="500" Height="500" Fill="{StaticResource lgb}" 
-                 VerticalAlignment="Top" HorizontalAlignment="Left"
-                 Margin="200,-80,0,0" Opacity="0.6">
-        </Ellipse>
-        <Ellipse Width="400" Height="400" Fill="{StaticResource lgb}" 
-                 VerticalAlignment="Top" HorizontalAlignment="Left"
-                 Margin="-80,-250,0,0">
-        </Ellipse>
+        <Ellipse
+            Width="500"
+            Height="500"
+            Margin="200,-80,0,0"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top"
+            Fill="{StaticResource lgb}"
+            Opacity="0.6" />
+        <Ellipse
+            Width="400"
+            Height="400"
+            Margin="-80,-250,0,0"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top"
+            Fill="{StaticResource lgb}" />
 
-        <!--窗口内容部分-->
+        <!--  窗口内容部分  -->
         <Grid>
             <Grid.RowDefinitions>
-                <RowDefinition Height="50"/>
-                <RowDefinition/>
+                <RowDefinition Height="50" />
+                <RowDefinition />
             </Grid.RowDefinitions>
-            <!--Logo+Title-->
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"
-                        VerticalAlignment="Center">
+            <!--  Logo+Title  -->
+            <StackPanel
+                HorizontalAlignment="Left"
+                VerticalAlignment="Center"
+                Orientation="Horizontal">
                 <!--<Image Source="../Assets/Images/Logo_64.png" Width="30"
                        Effect="{StaticResource dse}"
                        Margin="10,0"/>-->
-                <TextBlock FontSize="14" FontFamily="YouYuan"
-                           Foreground="#555" Effect="{StaticResource dse}"
-                           VerticalAlignment="Center">
-                    <Run Text="  "/>
-                    <Run Text="  "/>
-                    <Run Text="运动视觉流程控制系统"/>
-                    <Run Text="v1.0" FontFamily="Microsoft YaHei" FontSize="9"/>
+                <TextBlock
+                    VerticalAlignment="Center"
+                    Effect="{StaticResource dse}"
+                    FontFamily="YouYuan"
+                    FontSize="14"
+                    Foreground="#555">
+                    <Run Text="  " />
+                    <Run Text="  " />
+                    <Run Text="运动视觉流程控制系统" />
+                    <Run
+                        FontFamily="Microsoft YaHei"
+                        FontSize="9"
+                        Text="v1.0" />
                 </TextBlock>
             </StackPanel>
 
-            <!--Title部分控制按钮-->
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
-                <Button Content="&#xe617;" Style="{StaticResource TitleButtonStyle}"
-                        Command="{Binding NewFlowCommand}"/>
-                <Button Content="&#xeabe;" Style="{StaticResource TitleButtonStyle}"
-                        Command="{Binding OpenFlowCommand}"/>
-                <Button Content="&#xe60f;" Style="{StaticResource TitleButtonStyle}"
-                        Command="{Binding SaveFlowCommand}"/>
-                <Button Content="&#xe9d4;" Style="{StaticResource TitleButtonStyle}"/>
-                <Border Height="16" Width="1" Background="#CCC" Margin="5,0" VerticalAlignment="Center"/>
-                <Button Content="&#xea6e;" Style="{StaticResource TitleButtonStyle}"/>
-                <Button Content="&#xea76;" Style="{StaticResource TitleButtonStyle}"/>
-                <Border Height="16" Width="1" Background="#CCC" Margin="5,0"/>
-                <Button Content="&#xe669;" Style="{StaticResource TitleButtonStyle}"/>
-                <Button Content="&#xe618;" Style="{StaticResource TitleButtonStyle}"/>
-                <Border Height="16" Width="1" Background="#CCC" Margin="5,0"/>
-                <TextBlock Text="&#xe80a;" FontFamily="{StaticResource Iconfont}" VerticalAlignment="Center"
-                            FontSize="18" Margin="3,0" Foreground=" #1f71e5"/>
-                <TextBlock Text="&lt;未登录&gt;" VerticalAlignment="Center" Margin="3,0"/>
-                <Border Height="16" Width="1" Background="#CCC" Margin="5,0"/>
-                <Button Content="&#xe65a;" Style="{StaticResource TitleButtonStyle}"
-                        FontSize="14" Margin="0"
-                        Command="{Binding MinimizeCommand}"/>
-                <Button Content="&#xe692;" Style="{StaticResource TitleButtonStyle}"
-                        FontSize="14" Margin="0"
-                        Command="{Binding MaximizeCommand}"/>
-                <Button Content="&#xe660;" Style="{StaticResource TitleButtonStyle}"
-                        FontSize="14" Margin="0,0,5,0"
-                        Click="Button_Click"/>
+            <!--  Title部分控制按钮  -->
+            <StackPanel
+                HorizontalAlignment="Right"
+                VerticalAlignment="Top"
+                Orientation="Horizontal">
+
+                <Button
+                    Command="{Binding NewFlowCommand}"
+                    Content="&#xe617;"
+                    Style="{StaticResource TitleButtonStyle}" />
+                <Button
+                    Command="{Binding OpenFlowCommand}"
+                    Content="&#xeabe;"
+                    Style="{StaticResource TitleButtonStyle}" />
+                <Button
+                    Command="{Binding SaveFlowCommand}"
+                    Content="&#xe60f;"
+                    Style="{StaticResource TitleButtonStyle}" />
+                <Button Content="&#xe9d4;" Style="{StaticResource TitleButtonStyle}" />
+                <Border
+                    Width="1"
+                    Height="16"
+                    Margin="5,0"
+                    VerticalAlignment="Center"
+                    Background="#CCC" />
+                <Button Content="&#xea6e;" Style="{StaticResource TitleButtonStyle}" />
+                <Button Content="&#xea76;" Style="{StaticResource TitleButtonStyle}" />
+                <Border
+                    Width="1"
+                    Height="16"
+                    Margin="5,0"
+                    Background="#CCC" />
+                <Button Content="&#xe669;" Style="{StaticResource TitleButtonStyle}" />
+                <Button Content="&#xe618;" Style="{StaticResource TitleButtonStyle}" />
+                <Border
+                    Width="1"
+                    Height="16"
+                    Margin="5,0"
+                    Background="#CCC" />
+                <TextBlock
+                    Margin="3,0"
+                    VerticalAlignment="Center"
+                    FontFamily="{StaticResource Iconfont}"
+                    FontSize="18"
+                    Foreground=" #1f71e5"
+                    Text="&#xe80a;" />
+                <TextBlock
+                    Margin="3,0"
+                    VerticalAlignment="Center"
+                    Text="&lt;未登录&gt;" />
+                <Border
+                    Width="1"
+                    Height="16"
+                    Margin="5,0"
+                    Background="#CCC" />
+                <Button
+                    Margin="0"
+                    Command="{Binding MinimizeCommand}"
+                    Content="&#xe65a;"
+                    FontSize="14"
+                    Style="{StaticResource TitleButtonStyle}" />
+                <Button
+                    Margin="0"
+                    Command="{Binding MaximizeCommand}"
+                    Content="&#xe692;"
+                    FontSize="14"
+                    Style="{StaticResource TitleButtonStyle}" />
+                <Button
+                    Margin="0,0,5,0"
+                    Click="Button_Click"
+                    Content="&#xe660;"
+                    FontSize="14"
+                    Style="{StaticResource TitleButtonStyle}" />
             </StackPanel>
 
-            <!--流程相关交互-->
+            <!--  流程相关交互  -->
             <Grid Grid.Row="1" Margin="10,0,10,10">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="45"/>
-                    <ColumnDefinition Width="150"/>
-                    <ColumnDefinition/>
+                    <ColumnDefinition Width="55" />
+                    <ColumnDefinition Width="auto" />
+                    <ColumnDefinition />
                 </Grid.ColumnDefinitions>
-                <Border Background="#1f71e5" CornerRadius="10,0,0,10"/>
-                <Border Background="#8FFF" Grid.Column="1"/>
+                <Border Background="#1f71e5" CornerRadius="10,0,0,10" />
+                <Border Grid.Column="1" Background="#8FFF" />
 
-                <!--组件类别-->
-                <ItemsControl ItemsSource="{Binding CatalogList}"
-                               Margin="0,8"
-                              Panel.ZIndex="10">
+                <!--  组件类别  -->
+                <ItemsControl
+                    Margin="0,8"
+                    Panel.ZIndex="10"
+                    ItemsSource="{Binding CatalogList}">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <RadioButton GroupName="A"
-                                         IsChecked="{Binding IsSelected}"
-                                         Template="{StaticResource CatalogButtonTemp}"
-                                         Command="{Binding DataContext.CatalogItemCommand,RelativeSource={RelativeSource AncestorType=Window}}"
-                                         CommandParameter="{Binding}">
-                            </RadioButton>
+                            <RadioButton
+                                Command="{Binding DataContext.CatalogItemCommand, RelativeSource={RelativeSource AncestorType=Window}}"
+                                CommandParameter="{Binding}"
+                                GroupName="A"
+                                IsChecked="{Binding IsSelected}"
+                                Template="{StaticResource CatalogButtonTemp}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
 
-                <!--组件列表-->
-                <Grid Grid.Column="1">
+                <!--  组件列表  -->
+                <Grid
+                    Name="grid_sub_menu"
+                    Grid.Column="1"
+                    Width="150">
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="30"/>
-                        <RowDefinition/>
+                        <RowDefinition Height="30" />
+                        <RowDefinition />
                     </Grid.RowDefinitions>
-                    <Border Height="1" Background="#1000" VerticalAlignment="Bottom"/>
+                    <Border
+                        Height="1"
+                        VerticalAlignment="Bottom"
+                        Background="#1000" />
 
-                    <TextBlock Text="{Binding CurrentCatalog.Name}"
-                               VerticalAlignment="Center" Margin="5,0" 
-                                FontWeight="Bold" Foreground="#666"/>
+                    <TextBlock
+                        Margin="5,0"
+                        VerticalAlignment="Center"
+                        FontWeight="Bold"
+                        Foreground="#666"
+                        Text="{Binding CurrentCatalog.Name}" />
 
-                    <ItemsControl ItemsSource="{Binding CurrentCatalog.Components}"
-                              Grid.Row="1" VerticalAlignment="Top">
+                    <ItemsControl
+                        Grid.Row="1"
+                        VerticalAlignment="Top"
+                        ItemsSource="{Binding CurrentCatalog.Components}">
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                                <UniformGrid Columns="2"/>
+                                <UniformGrid Columns="2" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <Border Background="Transparent"
-                                        Width="55" VerticalAlignment="Center"
-                                        HorizontalAlignment="Center"
-                                        CornerRadius="5"
-                                        Margin="0,5"
-                                        Name="border">
+                                <Border
+                                    Name="border"
+                                    Width="55"
+                                    Margin="0,5"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    Background="Transparent"
+                                    CornerRadius="5">
                                     <Border.InputBindings>
-                                        <MouseBinding MouseAction="LeftClick"
-                                                      Command="{Binding DataContext.ComponentItemCommand,ElementName=win}"
-                                                      CommandParameter="{Binding ElementName=border}"/>
+                                        <MouseBinding
+                                            Command="{Binding DataContext.ComponentItemCommand, ElementName=win}"
+                                            CommandParameter="{Binding ElementName=border}"
+                                            MouseAction="LeftClick" />
                                     </Border.InputBindings>
                                     <StackPanel Margin="0,5">
-                                        <TextBlock Text="{Binding Icon}"
-                                               FontFamily="{StaticResource Iconfont}"
-                                               FontSize="30"
-                                                Foreground="#771f71e5"
-                                                HorizontalAlignment="Center"/>
-                                        <TextBlock Text="{Binding Name}"
-                                               FontSize="10"
-                                                HorizontalAlignment="Center"
-                                                Foreground="#C000"/>
+                                        <TextBlock
+                                            HorizontalAlignment="Center"
+                                            FontFamily="{StaticResource Iconfont}"
+                                            FontSize="30"
+                                            Foreground="#771f71e5"
+                                            Text="{Binding Icon}" />
+                                        <TextBlock
+                                            HorizontalAlignment="Center"
+                                            FontSize="10"
+                                            Foreground="#C000"
+                                            Text="{Binding Name}" />
                                     </StackPanel>
                                 </Border>
                                 <DataTemplate.Triggers>
                                     <Trigger Property="IsMouseOver" Value="True">
-                                        <Setter TargetName="border" Property="Background" Value="#1000"/>
+                                        <Setter TargetName="border" Property="Background" Value="#1000" />
                                     </Trigger>
                                 </DataTemplate.Triggers>
                             </DataTemplate>
@@ -241,25 +364,69 @@
                     </ItemsControl>
                 </Grid>
 
-                <!--流程页-->
-                <TabControl Style="{DynamicResource TabControlStyle}" Grid.Column="2"
-                            Margin="3,0,0,0" BorderThickness="0,1,0,0" 
-                            BorderBrush="#1f71e5"
-                            Background="Transparent"
-                            ItemsSource="{Binding FlowTabList}"
-                            SelectedIndex="0">
+
+
+                <!--  流程页  -->
+                <TabControl
+                    Grid.Column="2"
+                    Margin="3,0,0,0"
+                    Background="Transparent"
+                    BorderBrush="#1f71e5"
+                    BorderThickness="0,1,0,0"
+                    ItemsSource="{Binding FlowTabList}"
+                    SelectedIndex="0"
+                    Style="{DynamicResource TabControlStyle}">
                     <TabControl.ItemContainerStyle>
-                        <Style TargetType="TabItem" BasedOn="{StaticResource FlowTabStyle}">
-                            <Setter Property="Header" Value="{Binding Title}"/>
-                            <Setter Property="IsSelected" Value="{Binding IsCurrent}"/>
+                        <Style BasedOn="{StaticResource FlowTabStyle}" TargetType="TabItem">
+                            <Setter Property="Header" Value="{Binding Title}" />
+                            <Setter Property="IsSelected" Value="{Binding IsCurrent}" />
                         </Style>
                     </TabControl.ItemContainerStyle>
                     <TabControl.ContentTemplate>
                         <DataTemplate>
-                            <local:FlowTabView/>
+                            <local:FlowTabView />
                         </DataTemplate>
                     </TabControl.ContentTemplate>
                 </TabControl>
+
+
+                <ToggleButton
+                    Name="tb_menu_switch"
+                    Grid.Column="2"
+                    Width="35"
+                    Height="35"
+                    Margin="5,0,0,0"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Top"
+                    Background="Transparent"
+                    BorderThickness="0"
+                    IsChecked="False"
+                    IsThreeState="False"
+                    Style="{StaticResource ExpandedButtonStyle}"
+                    ToolTip="展开/收缩菜单"
+                    WindowChrome.IsHitTestVisibleInChrome="True">
+                    <ToggleButton.Triggers>
+                        <EventTrigger RoutedEvent="ToggleButton.Checked">
+                            <BeginStoryboard Storyboard="{StaticResource sb_menu_retract}" />
+                        </EventTrigger>
+                        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
+                            <BeginStoryboard Storyboard="{StaticResource sb_menu_expand}" />
+                        </EventTrigger>
+                    </ToggleButton.Triggers>
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontFamily="{StaticResource Iconfonts}"
+                        FontSize="16"
+                        Foreground="Orange"
+                        RenderTransformOrigin="0.5,0.5"
+                        Text="&#xe67d;">
+                        <TextBlock.RenderTransform>
+                            <RotateTransform Angle="90" />
+                        </TextBlock.RenderTransform>
+                    </TextBlock>
+                </ToggleButton>
+
             </Grid>
         </Grid>
     </Grid>

VisionFrame/VisionFrame.csproj

@@ -14,6 +14,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <None Remove="Assetss\Fonts\iconfont.ttf" />
     <None Remove="Assets\Fonts\iconfont.ttf" />
     <None Remove="Assets\Images\Logo_64.png" />
   </ItemGroup>
@@ -29,6 +30,9 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Resource Include="Assetss\Fonts\iconfont.ttf">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Assets\Fonts\iconfont.ttf" />
     <Resource Include="Assets\Images\Logo_64.png" />
   </ItemGroup>