xhouse/XplorePlane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#0030 优化图像处理窗体页面布局，简洁清晰

Browse Source
This commit is contained in:
zhengxuan.zhang
2026-03-16 17:12:25 +08:00
parent 06cc42ff33
commit 140153d449
4 changed files with 253 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
XplorePlane/App.xaml.cs
+1 -1
View File
@@ -154,7 +154,7 @@ namespace XplorePlane
protected override Window CreateShell()
{
return Container.Resolve<MainWindow>();
return Container.Resolve<MainWindowB>();
}
protected override void RegisterTypes(IContainerRegistry containerRegistry)
XplorePlane/Views/ImageProcessing/ImageProcessingPanelView.xaml
+92 -101
View File
@@ -1,16 +1,17 @@
<UserControl x:Class="XplorePlane.Views.ImageProcessingPanelView"
<UserControl
x:Class="XplorePlane.Views.ImageProcessingPanelView"
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:controls="clr-namespace:ImageProcessing.Controls;assembly=ImageProcessing.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:roi="clr-namespace:ImageROIControl.Controls;assembly=ImageROIControl"
mc:Ignorable="d"
d:DesignHeight="700" d:DesignWidth="1000">
d:DesignHeight="700"
d:DesignWidth="1000"
mc:Ignorable="d">
<UserControl.Resources>
<!-- 颜色 -->
<SolidColorBrush x:Key="PanelBg" Color="White" />
<SolidColorBrush x:Key="PanelBorder" Color="#cdcbcb" />
<SolidColorBrush x:Key="SeparatorBrush" Color="#E0E0E0" />
@@ -19,10 +20,8 @@
<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}" />
@@ -30,28 +29,27 @@
<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"
<Border Height="{TemplateBinding Height}" Background="White">
<ContentPresenter
x:Name="cp"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.FontFamily="{StaticResource CsdFont}"
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}" />
<Setter TargetName="cp" Property="TextBlock.Foreground" Value="{StaticResource BtnHoverFg}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="cp" Property="TextBlock.Foreground"
Value="{StaticResource BtnDisabledFg}" />
<Setter TargetName="cp" Property="TextBlock.Foreground" Value="{StaticResource BtnDisabledFg}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
@@ -59,7 +57,6 @@
</Setter>
</Style>
<!-- GroupBox 标题样式 -->
<Style TargetType="GroupBox">
<Setter Property="FontFamily" Value="{StaticResource CsdFont}" />
<Setter Property="FontSize" Value="12" />
@@ -77,87 +74,86 @@
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<!-- ═══════════════════════════════════════════════════
主内容区：左侧操作栏 | 中间图像 | 右侧参数配置
═══════════════════════════════════════════════════ -->
<!-- 主内容区：左侧操作栏 | 中间图像 | 右侧参数配置 -->
<Grid Grid.Row="0" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" MinWidth="140" MaxWidth="200" />
<ColumnDefinition Width="5" />
<ColumnDefinition
Width="160"
MinWidth="140"
MaxWidth="200" />
<ColumnDefinition Width="*" MinWidth="300" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="320" MinWidth="280" MaxWidth="420" />
<ColumnDefinition
Width="320"
MinWidth="280"
MaxWidth="420" />
</Grid.ColumnDefinitions>
<!-- ── 左侧操作栏 ── -->
<Border Grid.Column="0" Style="{StaticResource PanelBorderStyle}" Margin="0,0,0,0">
<!-- 左侧操作栏 -->
<Border Grid.Column="0" Style="{StaticResource PanelBorderStyle}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel>
<Button
Height="70"
Command="{Binding LoadImageCommand}"
Content="加载图像"
Style="{StaticResource MenuBtn}" />
<Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
<Button Content="加载图像" Height="70"
Style="{StaticResource MenuBtn}"
Command="{Binding LoadImageCommand}" />
<Button
Height="70"
Command="{Binding ApplyProcessingCommand}"
Content="处理图像"
Style="{StaticResource MenuBtn}" />
<Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
<Button Content="处理图像" Height="70"
Style="{StaticResource MenuBtn}"
Command="{Binding ApplyProcessingCommand}" />
<Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
<Button Content="重置图像" Height="70"
Style="{StaticResource MenuBtn}"
Command="{Binding ResetImageCommand}" />
<Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
<Button Content="保存结果" Height="70"
Style="{StaticResource MenuBtn}"
Command="{Binding SaveResultCommand}" />
<Button
Height="70"
Command="{Binding ResetImageCommand}"
Content="重置图像"
Style="{StaticResource MenuBtn}" />
<Rectangle Height="1" Fill="{StaticResource SeparatorBrush}" />
<Button
Height="70"
Command="{Binding SaveResultCommand}"
Content="保存结果"
Style="{StaticResource MenuBtn}" />
</StackPanel>
</ScrollViewer>
</Border>
<!-- GridSplitter 1 -->
<GridSplitter Grid.Column="1" Width="5"
HorizontalAlignment="Stretch"
Background="{StaticResource SeparatorBrush}" />
<!-- ── 中间：原始图像 + 处理结果 ── -->
<Grid Grid.Column="2">
<!-- 中间：原始图像 + 处理结果 -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
<RowDefinition Height="18*" />
<RowDefinition Height="301*" />
<RowDefinition Height="327*" />
</Grid.RowDefinitions>
<GroupBox Header="原始图像" Grid.Row="0" Margin="0,0,0,3">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Black">
<roi:PolygonRoiCanvas
ImageSource="{Binding OriginalImage}" />
</Border>
<GroupBox
Grid.Row="0"
Grid.RowSpan="3"
Margin="0,0,0,3"
Header="原始图像">
<roi:PolygonRoiCanvas Background="Black" ImageSource="{Binding OriginalImage}" />
</GroupBox>
<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.Row="3" Header="处理结果">
<roi:PolygonRoiCanvas Background="Black" ImageSource="{Binding CurrentImage}" />
</GroupBox>
</Grid>
<!-- GridSplitter 2 -->
<GridSplitter Grid.Column="3" Width="5"
HorizontalAlignment="Stretch"
Background="{StaticResource SeparatorBrush}" />
<!-- ── 右侧：算子选择 + 参数配置 ── -->
<Border Grid.Column="4" Style="{StaticResource PanelBorderStyle}" Margin="0,0,0,0">
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
VerticalAlignment="Top">
<!-- 右侧：算子选择 + 参数配置 -->
<Border Grid.Column="3" Style="{StaticResource PanelBorderStyle}">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel Margin="10,8,10,10">
<GroupBox Header="选择算子" Margin="0,0,0,8">
<ComboBox x:Name="cmbProcessors"
Height="30" Margin="4,4,4,4"
VerticalContentAlignment="Center"
<GroupBox Margin="0,0,0,8" Header="选择算子">
<ComboBox
x:Name="cmbProcessors"
Height="30"
Padding="6,0,0,0"
VerticalContentAlignment="Center"
FontFamily="{StaticResource CsdFont}"
FontSize="12"
ItemsSource="{Binding AvailableProcessors}"
@@ -165,11 +161,10 @@
SelectionChanged="OnProcessorComboChanged" />
</GroupBox>
<GroupBox Header="参数配置" Margin="0,0,0,0">
<GroupBox Header="参数配置">
<controls:ProcessorParameterControl
x:Name="parameterControl"
MinHeight="200"
Margin="4,4,4,4"
ParameterChanged="OnParameterChanged" />
</GroupBox>
@@ -178,40 +173,36 @@
</Border>
</Grid>
<!-- ═══════════════════════════════════════════════════
状态栏
═══════════════════════════════════════════════════ -->
<Border Grid.Row="1"
<!-- 状态栏 -->
<Border
Grid.Row="1"
Padding="12,0"
Background="{StaticResource StatusBarBg}"
BorderBrush="{StaticResource PanelBorder}"
BorderThickness="0,1,0,0"
Padding="12,0">
BorderThickness="0,1,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="180" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
<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="10"
<TextBlock
Grid.Column="0"
VerticalAlignment="Center"
Margin="0,0,8,0" />
FontFamily="{StaticResource CsdFont}"
FontSize="12"
Foreground="#333333">
<Run FontWeight="Bold" Text="状态：" /><Run Text="{Binding StatusMessage}" />
</TextBlock>
<ProgressBar
Grid.Column="2"
Height="10"
Margin="0,0,8,0"
VerticalAlignment="Center"
Maximum="1"
Minimum="0"
Value="{Binding ProcessingProgress}" />
</Grid>
</Border>
XplorePlane/Views/ImageProcessing/PipelineEditorView.xaml
+17 -60
View File
@@ -44,64 +44,22 @@
CornerRadius="4">
<Grid>
<Grid.RowDefinitions>
<!-- Row 0: 工具栏 -->
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
<RowDefinition Height="2*" />
<!-- Row 1: 流水线节点列表 -->
<RowDefinition Height="3*" />
<!-- Row 2: 分隔线 -->
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<!-- Row 3: 参数面板 -->
<RowDefinition Height="2*" MinHeight="80" />
<!-- Row 4: 状态栏 -->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- 标题栏：流水线名称 + 设备选择 -->
<Border
Grid.Row="0"
Padding="8,5"
Background="#F0F0F0"
BorderBrush="{StaticResource PanelBorder}"
BorderThickness="0,0,0,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Margin="0,0,8,0"
VerticalAlignment="Center"
FontFamily="{StaticResource CsdFont}"
FontSize="12"
FontWeight="Bold"
Foreground="#1c1c1b"
Text="图像处理 ▾" />
<TextBox
Grid.Column="1"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
FontFamily="{StaticResource CsdFont}"
FontSize="11"
Text="{Binding PipelineName, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock
Grid.Column="2"
Margin="0,0,4,0"
VerticalAlignment="Center"
FontFamily="{StaticResource CsdFont}"
FontSize="11"
Text="设备：" />
<telerik:RadComboBox
Grid.Column="3"
Height="22"
FontFamily="{StaticResource CsdFont}"
FontSize="11"
ItemsSource="{Binding AvailableDevices}"
SelectedItem="{Binding SelectedDevice}" />
</Grid>
</Border>
<!-- 工具栏 -->
<Border
Grid.Row="1"
Grid.Row="0"
Padding="6,4"
Background="#F5F5F5"
BorderBrush="{StaticResource PanelBorder}"
@@ -150,11 +108,10 @@
</Grid>
</Border>
<!-- 流水线节点列表（拖拽目标） -->
<ListBox
x:Name="PipelineListBox"
Grid.Row="2"
Grid.Row="1"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource PipelineNodeItemStyle}"
@@ -280,13 +237,13 @@
</ListBox>
<!-- 分隔线 -->
<Rectangle
Grid.Row="3"
Grid.Row="2"
Height="1"
Fill="{StaticResource SeparatorBrush}" />
<!-- 参数面板 -->
<ScrollViewer
Grid.Row="4"
Grid.Row="3"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<StackPanel Margin="8,6">
@@ -340,18 +297,18 @@
</StackPanel>
</ScrollViewer>
<!-- 状态栏 -->
<Border
Grid.Row="5"
Padding="3,3"
Background="#F5F5F5">
Grid.Row="4"
Padding="6,4"
Background="#F5F5F5"
BorderBrush="{StaticResource PanelBorder}"
BorderThickness="0,1,0,0">
<TextBlock
FontFamily="{StaticResource CsdFont}"
FontSize="11"
Foreground="#555"
Text="{Binding StatusMessage}"
Text="{Binding StatusMessage, StringFormat='Status: {0}'}"
TextTrimming="CharacterEllipsis" />
</Border>
</Grid>
XplorePlane/Views/Main/MainWindowB.xaml
+112 -41
View File
@@ -1737,8 +1737,8 @@
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<!-- 左侧: 计划导航 -->
@@ -1777,65 +1777,136 @@
<!-- 顶部: 射线源 -->
<views:RaySourcePanelView Grid.Row="0" />
<!-- 中间: 运动控制 / 探测器 通过Tab切换 -->
<views:MotionControlPanelView x:Name="MotionPanel" Grid.Row="1"
<views:MotionControlPanelView
x:Name="MotionPanel"
Grid.Row="1"
Visibility="Visible" />
<views:DetectorPanelView x:Name="DetectorPanel" Grid.Row="1"
<views:DetectorPanelView
x:Name="DetectorPanel"
Grid.Row="1"
Visibility="Collapsed" />
<!-- 底部: Overview -->
<Border Grid.Row="2" Background="#E8E8E8" BorderBrush="#CCCCCC" BorderThickness="0,1,0,0">
<StackPanel Orientation="Horizontal" Margin="6,3">
<TextBlock Text="Overview" FontWeight="SemiBold" Foreground="#333333" VerticalAlignment="Center" />
<TextBlock Text=" ▪ " Foreground="#4CAF50" VerticalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
<!-- 右侧: 垂直图标Tab栏 -->
<Border Grid.Column="1" Background="#5A6A7A" Width="36">
<Border
Grid.Column="1"
Width="36"
Background="#5A6A7A">
<StackPanel VerticalAlignment="Top">
<!-- 关闭 -->
<ToggleButton x:Name="BtnClose" Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="关闭面板">
<TextBlock Text="✕" Foreground="White" FontSize="16" FontWeight="Bold"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
x:Name="BtnClose"
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Cursor="Hand"
ToolTip="关闭面板">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
FontWeight="Bold"
Foreground="White"
Text="✕" />
</ToggleButton>
<!-- 最小化 -->
<ToggleButton Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="最小化">
<TextBlock Text="—" Foreground="White" FontSize="16" FontWeight="Bold"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Cursor="Hand"
ToolTip="最小化">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
FontWeight="Bold"
Foreground="White"
Text="—" />
</ToggleButton>
<!-- 射线源 -->
<ToggleButton Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="射线源">
<TextBlock Text="☢" Foreground="White" FontSize="18"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Cursor="Hand"
ToolTip="射线源">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Foreground="White"
Text="☢" />
</ToggleButton>
<!-- 探测器 -->
<ToggleButton x:Name="BtnDetector" Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="探测器"
Click="OnDetectorTabClick">
<TextBlock Text="📷" Foreground="White" FontSize="16"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
x:Name="BtnDetector"
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Click="OnDetectorTabClick"
Cursor="Hand"
ToolTip="探测器">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text="📷" />
</ToggleButton>
<!-- 运动控制 (默认选中，橙色高亮) -->
<ToggleButton x:Name="BtnMotion" Width="36" Height="36" BorderThickness="0"
Background="#F0A030" IsChecked="True" Cursor="Hand" ToolTip="运动控制"
Click="OnMotionTabClick">
<TextBlock Text="✥" Foreground="#D4A017" FontSize="22" FontWeight="Bold"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
x:Name="BtnMotion"
Width="36"
Height="36"
Background="#F0A030"
BorderThickness="0"
Click="OnMotionTabClick"
Cursor="Hand"
IsChecked="True"
ToolTip="运动控制">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="22"
FontWeight="Bold"
Foreground="#D4A017"
Text="✥" />
</ToggleButton>
<!-- 其他工具 -->
<ToggleButton Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="工具">
<TextBlock Text="🔧" Foreground="White" FontSize="15"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Cursor="Hand"
ToolTip="工具">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="15"
Foreground="White"
Text="🔧" />
</ToggleButton>
<!-- 网格 -->
<ToggleButton Width="36" Height="36" BorderThickness="0"
Background="Transparent" Cursor="Hand" ToolTip="网格">
<TextBlock Text="⊞" Foreground="White" FontSize="18"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton
Width="36"
Height="36"
Background="Transparent"
BorderThickness="0"
Cursor="Hand"
ToolTip="网格">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Foreground="White"
Text="⊞" />
</ToggleButton>
</StackPanel>
</Border>