#0017 引用库层面图像显示控件

2026-03-14 21:00:59 +08:00
parent 1214da13d2
commit 9695629a0a
2 changed files with 136 additions and 52 deletions
@@ -4,16 +4,83 @@
             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" />
@@ -22,83 +89,85 @@
                <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>
@@ -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">