From 9695629a0a85e8e1b4c5f583f3d7ad336173e9c5 Mon Sep 17 00:00:00 2001
From: "zhengxuan.zhang" <zhengxuan.zhang@hexagon.com>
Date: Sat, 14 Mar 2026 21:00:59 +0800
Subject: [PATCH] =?UTF-8?q?#0017=20=E5=BC=95=E7=94=A8=E5=BA=93=E5=B1=82?=
 =?UTF-8?q?=E9=9D=A2=E5=9B=BE=E5=83=8F=E6=98=BE=E7=A4=BA=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Views/ImageProcessingPanelView.xaml       | 184 +++++++++++++-----
 XplorePlane/XplorePlane.csproj                |   4 +
 2 files changed, 136 insertions(+), 52 deletions(-)

diff --git a/XplorePlane/Views/ImageProcessingPanelView.xaml b/XplorePlane/Views/ImageProcessingPanelView.xaml
index 4948b1c..48fec4e 100644
--- a/XplorePlane/Views/ImageProcessingPanelView.xaml
+++ b/XplorePlane/Views/ImageProcessingPanelView.xaml
@@ -4,101 +4,170 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:controls="clr-namespace:ImageProcessing.Controls;assembly=ImageProcessing.Controls"
+             xmlns:roi="clr-namespace:ImageROIControl.Controls;assembly=ImageROIControl"
              mc:Ignorable="d"
              d:DesignHeight="700" d:DesignWidth="1000">
+
+    <UserControl.Resources>
+
+        <!-- 颜色 -->
+        <SolidColorBrush x:Key="PanelBg"         Color="White" />
+        <SolidColorBrush x:Key="PanelBorder"      Color="#cdcbcb" />
+        <SolidColorBrush x:Key="SeparatorBrush"   Color="#E0E0E0" />
+        <SolidColorBrush x:Key="StatusBarBg"      Color="#F5F5F5" />
+        <SolidColorBrush x:Key="BtnDefaultFg"     Color="#1c1c1b" />
+        <SolidColorBrush x:Key="BtnHoverFg"       Color="#1c3866" />
+        <SolidColorBrush x:Key="BtnDisabledFg"    Color="#cdcbcb" />
+
+        <!-- 字体 -->
+        <FontFamily x:Key="CsdFont">Microsoft YaHei UI</FontFamily>
+
+        <!-- 侧边面板 Border 样式（白底、圆角、细边框） -->
+        <Style x:Key="PanelBorderStyle" TargetType="Border">
+            <Setter Property="Background"       Value="{StaticResource PanelBg}" />
+            <Setter Property="BorderBrush"      Value="{StaticResource PanelBorder}" />
+            <Setter Property="BorderThickness"  Value="1" />
+            <Setter Property="CornerRadius"     Value="4" />
+        </Style>
+
+        <!-- 菜单按钮样式：无边框白底，hover 变深蓝文字 -->
+        <Style x:Key="MenuBtn" TargetType="Button">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border Background="White" Height="{TemplateBinding Height}">
+                            <ContentPresenter x:Name="cp"
+                                HorizontalAlignment="Center" VerticalAlignment="Center"
+                                TextBlock.FontSize="15"
+                                TextBlock.FontWeight="Bold"
+                                TextBlock.FontFamily="{StaticResource CsdFont}"
+                                TextBlock.Foreground="{StaticResource BtnDefaultFg}" />
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="Cursor" Value="Hand" />
+                                <Setter TargetName="cp" Property="TextBlock.Foreground"
+                                        Value="{StaticResource BtnHoverFg}" />
+                            </Trigger>
+                            <Trigger Property="IsEnabled" Value="False">
+                                <Setter TargetName="cp" Property="TextBlock.Foreground"
+                                        Value="{StaticResource BtnDisabledFg}" />
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- GroupBox 标题样式 -->
+        <Style TargetType="GroupBox">
+            <Setter Property="FontFamily"   Value="{StaticResource CsdFont}" />
+            <Setter Property="FontSize"     Value="12" />
+            <Setter Property="FontWeight"   Value="Bold" />
+            <Setter Property="Foreground"   Value="#1c1c1b" />
+            <Setter Property="BorderBrush"  Value="#cdcbcb" />
+            <Setter Property="Padding"      Value="4,6,4,4" />
+        </Style>
+
+    </UserControl.Resources>
+
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="*" />
-            <RowDefinition Height="60" />
+            <RowDefinition Height="36" />
         </Grid.RowDefinitions>
 
-        <!-- 主内容区：三栏布局 -->
-        <Grid Grid.Row="0">
+        <!-- ═══════════════════════════════════════════════════
+             主内容区：左侧操作栏 | 中间图像 | 右侧参数配置
+             ═══════════════════════════════════════════════════ -->
+        <Grid Grid.Row="0" Margin="5">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="160" MinWidth="140" MaxWidth="200" />
                 <ColumnDefinition Width="5" />
-                <ColumnDefinition Width="*" MinWidth="400" />
+                <ColumnDefinition Width="*"   MinWidth="400" />
                 <ColumnDefinition Width="5" />
                 <ColumnDefinition Width="300" MinWidth="260" MaxWidth="380" />
             </Grid.ColumnDefinitions>
 
-            <!-- 左侧：操作按钮 -->
-            <Border Grid.Column="0"
-                    Background="#FAFAFA"
-                    BorderBrush="#DDDDDD"
-                    BorderThickness="0,0,1,0">
+            <!-- ── 左侧操作栏 ── -->
+            <Border Grid.Column="0" Style="{StaticResource PanelBorderStyle}" Margin="0,0,0,0">
                 <ScrollViewer VerticalScrollBarVisibility="Auto">
                     <StackPanel>
-                        <Button Content="加载图像"
-                                Height="60" Margin="8,8,8,4"
+                        <Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
+                        <Button Content="加载图像" Height="70"
+                                Style="{StaticResource MenuBtn}"
                                 Command="{Binding LoadImageCommand}" />
-                        <Button Content="处理图像"
-                                Height="60" Margin="8,4,8,4"
+                        <Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
+                        <Button Content="处理图像" Height="70"
+                                Style="{StaticResource MenuBtn}"
                                 Command="{Binding ApplyProcessingCommand}" />
-                        <Button Content="重置图像"
-                                Height="60" Margin="8,4,8,4"
+                        <Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
+                        <Button Content="重置图像" Height="70"
+                                Style="{StaticResource MenuBtn}"
                                 Command="{Binding ResetImageCommand}" />
-                        <Button Content="保存结果"
-                                Height="60" Margin="8,4,8,8"
+                        <Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
+                        <Button Content="保存结果" Height="70"
+                                Style="{StaticResource MenuBtn}"
                                 Command="{Binding SaveResultCommand}" />
+                        <Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
                     </StackPanel>
                 </ScrollViewer>
             </Border>
 
             <!-- GridSplitter 1 -->
-            <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="#E0E0E0" />
+            <GridSplitter Grid.Column="1" Width="5"
+                          HorizontalAlignment="Stretch"
+                          Background="{StaticResource SeparatorBrush}" />
 
-            <!-- 中间：原始图像 + 处理结果 -->
+            <!-- ── 中间：原始图像 + 处理结果 ── -->
             <Grid Grid.Column="2">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="*" />
                     <RowDefinition Height="*" />
                 </Grid.RowDefinitions>
 
-                <GroupBox Header="原始图像" Grid.Row="0" Margin="5,5,5,3">
-                    <Border BorderBrush="#CCCCCC" BorderThickness="1" Background="Black">
-                        <Image Source="{Binding OriginalImage}"
-                               Stretch="Uniform"
-                               RenderOptions.BitmapScalingMode="HighQuality" />
+                <GroupBox Header="原始图像" Grid.Row="0" Margin="0,0,0,3">
+                    <Border BorderBrush="LightGray" BorderThickness="1" Background="Black">
+                        <roi:PolygonRoiCanvas
+                            ImageSource="{Binding OriginalImage}" />
                     </Border>
                 </GroupBox>
 
-                <GroupBox Header="处理结果" Grid.Row="1" Margin="5,3,5,5">
-                    <Border BorderBrush="#CCCCCC" BorderThickness="1" Background="Black">
-                        <Image Source="{Binding CurrentImage}"
-                               Stretch="Uniform"
-                               RenderOptions.BitmapScalingMode="HighQuality" />
+                <GroupBox Header="处理结果" Grid.Row="1" Margin="0,3,0,0">
+                    <Border BorderBrush="LightGray" BorderThickness="1" Background="Black">
+                        <roi:PolygonRoiCanvas
+                            ImageSource="{Binding CurrentImage}" />
                     </Border>
                 </GroupBox>
             </Grid>
 
             <!-- GridSplitter 2 -->
-            <GridSplitter Grid.Column="3" Width="5" HorizontalAlignment="Stretch" Background="#E0E0E0" />
+            <GridSplitter Grid.Column="3" Width="5"
+                          HorizontalAlignment="Stretch"
+                          Background="{StaticResource SeparatorBrush}" />
 
-            <!-- 右侧：算子选择 + 参数配置 -->
-            <Border Grid.Column="4"
-                    Background="#FAFAFA"
-                    BorderBrush="#DDDDDD"
-                    BorderThickness="1,0,0,0">
+            <!-- ── 右侧：算子选择 + 参数配置 ── -->
+            <Border Grid.Column="4" Style="{StaticResource PanelBorderStyle}" Margin="0,0,0,0">
                 <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top">
-                    <StackPanel Margin="10">
+                    <StackPanel Margin="10,8,10,10">
 
-                        <!-- 算子选择 -->
-                        <GroupBox Header="选择算子" Margin="0,0,0,10">
+                        <GroupBox Header="选择算子" Margin="0,0,0,8">
                             <ComboBox x:Name="cmbProcessors"
-                                      Height="32" Margin="5"
+                                      Height="30" Margin="4,4,4,4"
                                       VerticalContentAlignment="Center"
+                                      Padding="6,0,0,0"
+                                      FontFamily="{StaticResource CsdFont}"
+                                      FontSize="12"
                                       ItemsSource="{Binding AvailableProcessors}"
                                       SelectedItem="{Binding SelectedProcessor}"
                                       SelectionChanged="OnProcessorComboChanged" />
                         </GroupBox>
 
-                        <!-- 参数配置 (复用 DLL 里的 ProcessorParameterControl) -->
-                        <GroupBox Header="参数配置" Margin="0,0,0,10">
+                        <GroupBox Header="参数配置" Margin="0,0,0,0">
                             <controls:ProcessorParameterControl
                                 x:Name="parameterControl"
-                                Height="350"
-                                Margin="5,0,5,0"
+                                MinHeight="200"
+                                Margin="4,4,4,4"
                                 ParameterChanged="OnParameterChanged" />
                         </GroupBox>
 
@@ -107,31 +176,42 @@
             </Border>
         </Grid>
 
-        <!-- 状态栏 -->
+        <!-- ═══════════════════════════════════════════════════
+             状态栏
+             ═══════════════════════════════════════════════════ -->
         <Border Grid.Row="1"
-                Background="#F5F5F5"
-                BorderBrush="#CCCCCC"
+                Background="{StaticResource StatusBarBg}"
+                BorderBrush="{StaticResource PanelBorder}"
                 BorderThickness="0,1,0,0"
-                Padding="10,0">
+                Padding="12,0">
             <Grid>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="200" />
+                    <ColumnDefinition Width="180" />
                 </Grid.ColumnDefinitions>
 
                 <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
-                    <TextBlock Text="状态：" FontWeight="Bold" />
-                    <TextBlock Text="{Binding StatusMessage}" Margin="4,0,0,0" />
+                    <TextBlock Text="状态："
+                               FontFamily="{StaticResource CsdFont}"
+                               FontWeight="Bold"
+                               FontSize="12"
+                               Foreground="#333333" />
+                    <TextBlock Text="{Binding StatusMessage}"
+                               FontFamily="{StaticResource CsdFont}"
+                               FontSize="12"
+                               Foreground="#333333"
+                               Margin="4,0,0,0" />
                 </StackPanel>
 
                 <ProgressBar Grid.Column="2"
                              Value="{Binding ProcessingProgress}"
                              Minimum="0" Maximum="1"
-                             Height="12"
+                             Height="10"
                              VerticalAlignment="Center"
-                             Margin="0,0,10,0" />
+                             Margin="0,0,8,0" />
             </Grid>
         </Border>
+
     </Grid>
 </UserControl>
diff --git a/XplorePlane/XplorePlane.csproj b/XplorePlane/XplorePlane.csproj
index fe38ae1..b1023d4 100644
--- a/XplorePlane/XplorePlane.csproj
+++ b/XplorePlane/XplorePlane.csproj
@@ -64,6 +64,10 @@
       <HintPath>Libs\ImageProcessing\ImageProcessing.Controls.dll</HintPath>
       <Private>True</Private>
     </Reference>
+    <Reference Include="ImageROIControl">
+      <HintPath>Libs\ImageProcessing\ImageROIControl.dll</HintPath>
+      <Private>True</Private>
+    </Reference>
   </ItemGroup>
   <ItemGroup>
     <Reference Include="Telerik.Windows.Controls">