记录界面

This commit is contained in:
czj
2026-06-05 10:59:24 +08:00
parent d960cb5912
commit 0c494bc132
4 changed files with 556 additions and 0 deletions

View File

@@ -0,0 +1,361 @@
<UserControl x:Class="SettingModule.Views.SettingView"
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:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:prism="http://prismlibrary.com/"
xmlns:b="clr-namespace:UIShare.Behaviors;assembly=UIShare"
xmlns:converters="clr-namespace:UIShare.Converters;assembly=UIShare"
prism:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d"
d:DesignHeight="700"
d:DesignWidth="1200">
<UserControl.Resources>
<converters:LessThanConverter x:Key="LessThanConverter"/>
<converters:BooleanToVisibilityConverter x:Key="BoolToVisibility"/>
</UserControl.Resources>
<!-- 外层 Border1) 装 MouseDoubleClickBehavior 实现九宫格双击展开
2) 给整个设置界面一个浅色背景 -->
<Border Background="#F5F7FA">
<i:Interaction.Behaviors>
<b:MouseDoubleClickBehavior
Command="{Binding DataContext.RefreshCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</i:Interaction.Behaviors>
<!-- 给最外层 Grid 命名,方便子控件 DataTrigger 监听 ActualWidth -->
<Grid x:Name="RootGrid" Margin="8">
<Grid.RowDefinitions>
<!-- Row0 标题:窄宽时折叠为 0 -->
<RowDefinition>
<RowDefinition.Style>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="Auto"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Height" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<!-- Row1 主体 -->
<RowDefinition Height="*"/>
<!-- Row2 状态栏:窄宽时折叠为 0 -->
<RowDefinition>
<RowDefinition.Style>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="Auto"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Height" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
</Grid.RowDefinitions>
<!-- ========== Row0标题 ========== -->
<TextBlock Grid.Row="0"
Text="{Binding TestStatus, StringFormat=设置界面 - {0}}"
FontSize="20" FontWeight="Bold"
Margin="4,0,0,8">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<!-- ========== Row1主体左设备列表 + 右配置面板)========== -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<!-- Col0 设备列表:窄宽时折叠为 0 -->
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="240"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Width" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<!-- Col1 拖拽条:窄宽时折叠为 0 -->
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="6"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Width" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ===== 左:设备列表 ===== -->
<Border Grid.Column="0"
Background="White"
BorderBrush="#DDD" BorderThickness="1"
CornerRadius="4">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<DockPanel>
<Border DockPanel.Dock="Top"
Background="#ECEFF4"
Padding="8,4">
<TextBlock Text="设备列表" FontWeight="Bold"/>
</Border>
<ListBox ItemsSource="{Binding DeviceList}"
SelectedItem="{Binding SelectedDevice}"
BorderThickness="0"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="4,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding DeviceName}" FontWeight="Bold"/>
<TextBlock Text="{Binding DeviceType}"
Foreground="#888" FontSize="11"
Margin="0,2,0,0"/>
</StackPanel>
<!-- 启用 / 连接 状态指示 -->
<StackPanel Grid.Column="1"
Orientation="Horizontal"
VerticalAlignment="Center">
<Border Width="8" Height="8" CornerRadius="4"
Margin="0,0,4,0" VerticalAlignment="Center">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="#CCC"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="True">
<Setter Property="Background" Value="#4CAF50"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Border>
<!-- ===== 拖拽条 ===== -->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Stretch"
Background="Transparent">
<GridSplitter.Style>
<Style TargetType="GridSplitter">
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</GridSplitter.Style>
</GridSplitter>
<!-- ===== 右:配置面板(始终显示,根据 SelectedDevice 切换内容) ===== -->
<Border Grid.Column="2"
Background="White"
BorderBrush="#DDD" BorderThickness="1"
CornerRadius="4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!-- 顶部工具栏 -->
<RowDefinition Height="*"/>
<!-- 配置区 -->
</Grid.RowDefinitions>
<!-- 顶部工具栏:当前设备名 + 保存 / 重置 -->
<Border Grid.Row="0"
Background="#ECEFF4"
Padding="10,6"
BorderBrush="#DDD" BorderThickness="0,0,0,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
FontWeight="Bold">
<Run Text="配置:"/>
<Run Text="{Binding SelectedDevice.DeviceName, FallbackValue=未选中}"/>
</TextBlock>
<StackPanel Grid.Column="1"
Orientation="Horizontal">
<Button Content="重置"
Command="{Binding ResetCommand}"
Padding="12,4"/>
<Button Content="保存"
Command="{Binding SaveCommand}"
Padding="12,4" Margin="6,0,0,0"/>
</StackPanel>
</Grid>
</Border>
<!-- 配置卡片区:用 ScrollViewer 容纳,避免内容多了挤压 -->
<ScrollViewer Grid.Row="1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
Padding="14">
<StackPanel>
<!-- 卡片 1基本信息 -->
<Border Background="White"
BorderBrush="#E0E0E0" BorderThickness="1"
CornerRadius="4" Padding="14"
Margin="0,0,0,12">
<StackPanel>
<TextBlock Text="基本信息"
FontWeight="Bold" FontSize="14"
Margin="0,0,0,10"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="设备名称:" VerticalAlignment="Center" Margin="0,4"/>
<TextBox Grid.Row="0" Grid.Column="1" Margin="0,4"
Text="{Binding SelectedDevice.DeviceName, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="设备类型:" VerticalAlignment="Center" Margin="0,4"/>
<TextBox Grid.Row="1" Grid.Column="1" Margin="0,4"
Text="{Binding SelectedDevice.DeviceType, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="备注说明:" VerticalAlignment="Center" Margin="0,4"/>
<TextBox Grid.Row="2" Grid.Column="1" Margin="0,4"
Text="{Binding SelectedDevice.Remark, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="启用状态:" VerticalAlignment="Center" Margin="0,4"/>
<CheckBox Grid.Row="3" Grid.Column="1" Margin="0,6"
VerticalAlignment="Center"
IsChecked="{Binding SelectedDevice.IsEnabled}"
Content="启用此设备"/>
<TextBlock Grid.Row="4" Grid.Column="0" Text="连接状态:" VerticalAlignment="Center" Margin="0,4"/>
<StackPanel Grid.Row="4" Grid.Column="1"
Orientation="Horizontal" Margin="0,6">
<Border Width="10" Height="10" CornerRadius="5"
VerticalAlignment="Center" Margin="0,0,6,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="#CCC"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedDevice.IsConnected}" Value="True">
<Setter Property="Background" Value="#4CAF50"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<TextBlock VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="未连接"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedDevice.IsConnected}" Value="True">
<Setter Property="Text" Value="已连接"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Grid>
</StackPanel>
</Border>
<!-- 卡片 2连接参数占位后续按设备类型展开 -->
<Border Background="White"
BorderBrush="#E0E0E0" BorderThickness="1"
CornerRadius="4" Padding="14"
Margin="0,0,0,12">
<StackPanel>
<TextBlock Text="连接参数"
FontWeight="Bold" FontSize="14"
Margin="0,0,0,10"/>
<TextBlock Foreground="#888" FontSize="12" TextWrapping="Wrap">
<Run Text="此处将根据设备类型显示对应的连接参数如串口波特率、CAN 比特率、IP 端口等),当前为占位区域。"/>
</TextBlock>
</StackPanel>
</Border>
<!-- 卡片 3高级设置占位 -->
<Border Background="White"
BorderBrush="#E0E0E0" BorderThickness="1"
CornerRadius="4" Padding="14">
<StackPanel>
<TextBlock Text="高级设置"
FontWeight="Bold" FontSize="14"
Margin="0,0,0,10"/>
<TextBlock Foreground="#888" FontSize="12" TextWrapping="Wrap">
<Run Text="超时、重试、缓存策略等高级选项后续在此扩展。"/>
</TextBlock>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
</Grid>
<!-- ========== Row2状态栏 ========== -->
<Border Grid.Row="2"
Background="#ECEFF4"
Padding="8,4" Margin="0,6,0,0"
CornerRadius="2">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ActualWidth, ElementName=RootGrid, Converter={StaticResource LessThanConverter}, ConverterParameter=600}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="{Binding StatusMessage}"
Foreground="#444"
FontSize="12"/>
</Border>
</Grid>
</Border>
</UserControl>