记录界面
This commit is contained in:
361
SettingModule/Views/SettingView.xaml
Normal file
361
SettingModule/Views/SettingView.xaml
Normal 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>
|
||||
|
||||
<!-- 外层 Border:1) 装 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>
|
||||
Reference in New Issue
Block a user