修改了设备列表的界面

DMS.WPF/Views/DevicesView.xaml

@@ -14,110 +14,291 @@
     mc:Ignorable="d">
     <UserControl.Resources>
         <localConverters:BooleanToBrushConverter x:Key="BooleanToBrushConverter" />
+        
+        <!-- 添加需要的转换器 -->
+        <localConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
+        <localConverters:CountToVisibilityConverter x:Key="CountToVisibilityConverter" />
+        <localConverters:BoolToStringConverter x:Key="BoolToStringConverter" />
+        <localConverters:BoolToColorConverter x:Key="BoolToColorConverter" />
+        
+        <!-- 设备项模板 -->
         <DataTemplate x:Key="DeviceItemTemplate">
-            <Border
-                Margin="5"
-                Padding="15"
-                BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
-                BorderThickness="1"
-                CornerRadius="8"
-                Background="{Binding IsRunning, Converter={StaticResource BooleanToBrushConverter}, ConverterParameter='#FFA8E063|{DynamicResource SystemControlBackgroundAltHighBrush}'}">
+            <Border Background="White" 
+                    BorderBrush="#E0E0E0" 
+                    BorderThickness="1" 
+                    CornerRadius="8"
+                    Margin="5"
+                    Padding="15">
                 <Border.Effect>
-                    <DropShadowEffect
-                        BlurRadius="5"
-                        Opacity="0.1"
-                        ShadowDepth="1"
-                        Color="Black" />
+                    <DropShadowEffect ShadowDepth="2" 
+                                      BlurRadius="5" 
+                                      Opacity="0.1" 
+                                      Color="#888888"/>
                 </Border.Effect>
-
-
-
-
+                
                 <Grid>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
                     </Grid.RowDefinitions>
-
-                    <!--  Row 0: Header with Name and ToggleSwitch  -->
-                    <DockPanel Grid.Row="0" Margin="0,0,0,10">
-                        <ui:ToggleSwitch
-                            DockPanel.Dock="Right"
-                            IsOn="{Binding IsActive}"
-                            OffContent="停止"
-                            OnContent="启动" />
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            FontSize="20"
-                            FontWeight="SemiBold"
-                            Text="{Binding Name}" />
-
-                    </DockPanel>
-
-                    <!--  Row 1: Details with Icons  -->
-                    <StackPanel Grid.Row="1" Margin="0,0,0,10">
-                        <StackPanel Margin="0,2" Orientation="Horizontal">
-                            <ui:FontIcon
-                                Margin="0,0,8,0"
-                                VerticalAlignment="Center"
-                                FontSize="14"
-                                Icon="{x:Static ui:SegoeFluentIcons.Info}" />
-                            <TextBlock
-                                Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}"
-                                Text="{Binding Description}"
-                                TextTrimming="CharacterEllipsis" />
-                        </StackPanel>
-                        <StackPanel Margin="0,2" Orientation="Horizontal">
-                            <ui:FontIcon
-                                Margin="0,0,8,0"
-                                VerticalAlignment="Center"
-                                FontSize="14"
-                                Icon="{x:Static ui:SegoeFluentIcons.Connect}" />
-                            <TextBlock>
-                                <Run Text="{Binding IpAddress, FallbackValue='192.168.1.1'}" />
-                                <Run Text=":" />
-                                <Run Text="{Binding Port, FallbackValue='102'}" />
-                            </TextBlock>
-                        </StackPanel>
-                        <StackPanel Margin="0,2" Orientation="Horizontal">
-                            <ui:FontIcon
-                                Margin="0,0,8,0"
-                                VerticalAlignment="Center"
-                                FontSize="14"
-                                Icon="{x:Static ui:SegoeFluentIcons.DeveloperTools}" />
-                            <TextBlock>
-                                <Run Text="{Binding DeviceType, FallbackValue='S7_1200'}" />
-                                <Run Text=" / " />
-                                <Run Text="{Binding Protocol, FallbackValue='S7'}" />
-                            </TextBlock>
-                        </StackPanel>
+                    
+                    <!-- 设备基本信息区域 -->
+                    <StackPanel Grid.Row="0" Margin="0,0,0,15">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            
+                            <!-- 设备名称和描述 -->
+                            <StackPanel Grid.Column="0">
+                                <StackPanel Orientation="Horizontal" Margin="0,0,0,5">
+                                    <ui:FontIcon Glyph="&#xE975;" 
+                                                 FontSize="20" 
+                                                 Foreground="{DynamicResource SystemAccentColorBrush}"
+                                                 Margin="0,0,8,0"/>
+                                    <TextBlock Text="{Binding Name}" 
+                                               FontWeight="SemiBold" 
+                                               FontSize="16" 
+                                               VerticalAlignment="Center"/>
+                                </StackPanel>
+                                
+                                <TextBlock Text="{Binding Description}" 
+                                           Foreground="#666666" 
+                                           FontSize="13" 
+                                           TextWrapping="Wrap"
+                                           Margin="0,0,0,8"/>
+                                
+                                <StackPanel Orientation="Horizontal">
+                                    <ui:FontIcon Glyph="&#xE76C;" 
+                                                 FontSize="14" 
+                                                 Foreground="#888888"
+                                                 Margin="0,0,5,0"/>
+                                    <TextBlock Text="{Binding DeviceType}" 
+                                               Foreground="#888888" 
+                                               FontSize="12"/>
+                                    
+                                    <Rectangle Width="1" 
+                                               Height="12" 
+                                               Fill="#CCCCCC" 
+                                               Margin="10,0"/>
+                                    
+                                    <ui:FontIcon Glyph="&#xE8F4;" 
+                                                 FontSize="14" 
+                                                 Foreground="#888888"
+                                                 Margin="10,0,5,0"/>
+                                    <TextBlock Text="{Binding ConnectionStatus}" 
+                                               Foreground="#888888" 
+                                               FontSize="12"/>
+                                </StackPanel>
+                            </StackPanel>
+                            
+                            <!-- 状态指示器 -->
+                            <StackPanel Grid.Column="1" 
+                                        Orientation="Horizontal" 
+                                        VerticalAlignment="Top">
+                                <Border Background="{Binding IsConnected, 
+                                                     Converter={StaticResource BoolToColorConverter}, 
+                                                     ConverterParameter='Green;Red'}"
+                                        CornerRadius="8"
+                                        Width="16"
+                                        Height="16"
+                                        Margin="0,0,10,0">
+                                    <Border.ToolTip>
+                                        <TextBlock Text="{Binding IsConnected, 
+                                                                  Converter={StaticResource BoolToStringConverter}, 
+                                                                  ConverterParameter='已连接;未连接'}"/>
+                                    </Border.ToolTip>
+                                </Border>
+                                
+                                <ToggleButton x:Name="ExpandToggleButton"
+                                              Style="{StaticResource DefaultToggleButtonStyle}"
+                                              Content="&#xE70D;"
+                                              FontFamily="Segoe MDL2 Assets"
+                                              FontSize="16"
+                                              Foreground="#666666"
+                                              Background="Transparent"
+                                              BorderThickness="0"
+                                              IsChecked="True"
+                                              ToolTip="展开/收起变量表"/>
+                            </StackPanel>
+                        </Grid>
+                    </StackPanel>
+                    
+                    <!-- 变量表列表区域 -->
+                    <StackPanel Grid.Row="1" Margin="0,0,0,15">
+                        <Border Background="#F8F8F8" 
+                                BorderBrush="#E0E0E0" 
+                                BorderThickness="1" 
+                                CornerRadius="6"
+                                Visibility="{Binding ElementName=ExpandToggleButton, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}">
+                            <StackPanel>
+                                <!-- 变量表标题 -->
+                                <Border Background="#F0F0F0" 
+                                        BorderBrush="#E0E0E0" 
+                                        BorderThickness="0,0,0,1" 
+                                        CornerRadius="6,6,0,0"
+                                        Padding="12,8">
+                                    <Grid>
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                        </Grid.ColumnDefinitions>
+                                        
+                                        <TextBlock Grid.Column="0"
+                                                   Text="变量表列表" 
+                                                   FontWeight="SemiBold" 
+                                                   FontSize="14" 
+                                                   Foreground="#333333"/>
+                                        
+                                        <Button Grid.Column="1"
+                                                Style="{StaticResource DefaultButtonStyle}"
+                                                Content="&#xE710;"
+                                                FontFamily="Segoe MDL2 Assets"
+                                                FontSize="14"
+                                                Width="28"
+                                                Height="28"
+                                                Padding="0"
+                                                ToolTip="添加变量表"/>
+                                    </Grid>
+                                </Border>
+                                
+                                <!-- 变量表列表 -->
+                                <ItemsControl ItemsSource="{Binding VariableTables}" 
+                                              Margin="0">
+                                    <ItemsControl.ItemTemplate>
+                                        <DataTemplate>
+                                            <Border Background="White" 
+                                                    BorderBrush="#EEEEEE" 
+                                                    BorderThickness="0,0,0,1"
+                                                    Padding="12,10">
+                                                <Grid>
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="*"/>
+                                                        <ColumnDefinition Width="Auto"/>
+                                                    </Grid.ColumnDefinitions>
+                                                    
+                                                    <StackPanel Grid.Column="0">
+                                                        <StackPanel Orientation="Horizontal" Margin="0,0,0,3">
+                                                            <ui:FontIcon Glyph="&#xE8EC;" 
+                                                                         FontSize="14" 
+                                                                         Foreground="{DynamicResource SystemAccentColorBrush}"
+                                                                         Margin="0,0,6,0"/>
+                                                            <TextBlock Text="{Binding Name}" 
+                                                                       FontWeight="SemiBold" 
+                                                                       FontSize="13"/>
+                                                        </StackPanel>
+                                                        
+                                                        <TextBlock Text="{Binding Description}" 
+                                                                   Foreground="#888888" 
+                                                                   FontSize="11" 
+                                                                   TextWrapping="Wrap"
+                                                                   MaxWidth="300"/>
+                                                    </StackPanel>
+                                                    
+                                                    <StackPanel Grid.Column="1" 
+                                                                Orientation="Horizontal">
+                                                        <TextBlock Text="{Binding Variables.Count}" 
+                                                                   Foreground="#666666" 
+                                                                   FontSize="12"
+                                                                   VerticalAlignment="Center"
+                                                                   Margin="0,0,5,0"/>
+                                                        <TextBlock Text="变量" 
+                                                                   Foreground="#888888" 
+                                                                   FontSize="12"
+                                                                   VerticalAlignment="Center"/>
+                                                        
+                                                        <Button Content="&#xE76C;"
+                                                                FontFamily="Segoe MDL2 Assets"
+                                                                FontSize="14"
+                                                                Width="26"
+                                                                Height="26"
+                                                                Margin="8,0,0,0"
+                                                                Padding="0"
+                                                                Style="{StaticResource DefaultButtonStyle}"
+                                                                ToolTip="编辑变量表"/>
+                                                                
+                                                        <Button Content="&#xE74D;"
+                                                                FontFamily="Segoe MDL2 Assets"
+                                                                FontSize="14"
+                                                                Width="26"
+                                                                Height="26"
+                                                                Margin="4,0,0,0"
+                                                                Padding="0"
+                                                                Style="{StaticResource DefaultButtonStyle}"
+                                                                ToolTip="删除变量表"/>
+                                                    </StackPanel>
+                                                </Grid>
+                                            </Border>
+                                        </DataTemplate>
+                                    </ItemsControl.ItemTemplate>
+                                </ItemsControl>
+                                
+                                <!-- 空状态提示 -->
+                                <TextBlock Text="暂无变量表" 
+                                           Foreground="#AAAAAA" 
+                                           FontSize="13" 
+                                           HorizontalAlignment="Center"
+                                           Padding="20,15"
+                                           Visibility="{Binding VariableTables.Count, 
+                                                               Converter={StaticResource CountToVisibilityConverter}}"/>
+                            </StackPanel>
+                        </Border>
+                    </StackPanel>
+                    
+                    <!-- 操作按钮区域 -->
+                    <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
+                        <Button Content="&#xE8A5;"
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="16"
+                                Width="36"
+                                Height="36"
+                                Margin="0,0,8,0"
+                                Padding="0"
+                                Style="{StaticResource AccentButtonStyle}"
+                                ToolTip="连接设备">
+                            <Button.Effect>
+                                <DropShadowEffect ShadowDepth="1" 
+                                                  BlurRadius="3" 
+                                                  Opacity="0.2" 
+                                                  Color="{DynamicResource SystemAccentColor}"/>
+                            </Button.Effect>
+                        </Button>
+                        
+                        <Button Content="&#xE76C;"
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="16"
+                                Width="36"
+                                Height="36"
+                                Margin="0,0,8,0"
+                                Padding="0"
+                                Style="{StaticResource DefaultButtonStyle}"
+                                ToolTip="编辑设备"/>
+                        
+                        <Button Content="&#xE896;"
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="16"
+                                Width="36"
+                                Height="36"
+                                Margin="0,0,8,0"
+                                Padding="0"
+                                Style="{StaticResource DefaultButtonStyle}"
+                                ToolTip="监控设备"/>
+                        
+                        <Button Content="&#xE74D;"
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="16"
+                                Width="36"
+                                Height="36"
+                                Padding="0"
+                                Style="{StaticResource DefaultButtonStyle}"
+                                ToolTip="删除设备">
+                            <Button.Foreground>
+                                <SolidColorBrush Color="#D32F2F"/>
+                            </Button.Foreground>
+                        </Button>
                     </StackPanel>
-
-                    <!--  Row 2: Variable Tables  -->
-                    <GroupBox
-                        Grid.Row="2"
-                        Padding="5"
-                        Header="变量表">
-                        <ListBox ItemsSource="{Binding VariableTables}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
-                            <ListBox.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <WrapPanel />
-                                </ItemsPanelTemplate>
-                            </ListBox.ItemsPanel>
-                            <ListBox.ItemTemplate>
-                                <DataTemplate>
-                                    <Border
-                                        Margin="2"
-                                        Padding="8,4"
-                                        Background="{DynamicResource SystemControlBackgroundListLowBrush}"
-                                        CornerRadius="4">
-                                        <TextBlock Text="{Binding Name}" />
-                                    </Border>
-                                </DataTemplate>
-                            </ListBox.ItemTemplate>
-                        </ListBox>
-                    </GroupBox>
                 </Grid>
             </Border>
         </DataTemplate>

DMS.WPF/Views/Dialogs/DeviceDialog.xaml

@@ -52,14 +52,25 @@
             <hc:TextBox
                 Grid.Row="0"
                 Grid.Column="0"
+                Margin="0,15,0,0"
                 hc:InfoElement.Title="设备名称:"
                 Text="{Binding Device.Name, UpdateSourceTrigger=PropertyChanged}" />
-
-            <hc:TextBox
+            <hc:ComboBox
+                x:Name="ProtocolComboBox"
                 Grid.Row="0"
                 Grid.Column="2"
-                hc:InfoElement.Title="设备描述:"
-                Text="{Binding Device.Description, UpdateSourceTrigger=PropertyChanged}" />
+                Margin="0,15,0,0"
+                hc:InfoElement.Title="通讯协议:"
+                IsEnabled="{Binding IsAddMode}"
+                ItemsSource="{Binding Source={StaticResource ProtocolType}}"
+                SelectedItem="{Binding Device.Protocol}">
+                <ComboBox.ItemTemplate>
+                    <DataTemplate>
+                        <TextBlock Text="{Binding Converter={StaticResource EnumDescriptionConverter}}" />
+                    </DataTemplate>
+                </ComboBox.ItemTemplate>
+            </hc:ComboBox>
+          
 
             <!--  Row 1  -->
             <hc:TextBox
@@ -91,21 +102,12 @@
                 </ComboBox.ItemTemplate>
             </hc:ComboBox>
 
-            <hc:ComboBox
-                x:Name="ProtocolComboBox"
+            <hc:TextBox
                 Grid.Row="2"
-                Grid.Column="4"
+                Grid.Column="2"
                 Margin="0,15,0,0"
-                hc:InfoElement.Title="通讯协议:"
-                IsEnabled="{Binding IsAddMode}"
-                ItemsSource="{Binding Source={StaticResource ProtocolType}}"
-                SelectedItem="{Binding Device.Protocol}">
-                <ComboBox.ItemTemplate>
-                    <DataTemplate>
-                        <TextBlock Text="{Binding Converter={StaticResource EnumDescriptionConverter}}" />
-                    </DataTemplate>
-                </ComboBox.ItemTemplate>
-            </hc:ComboBox>
+                hc:InfoElement.Title="设备描述:"
+                Text="{Binding Device.Description, UpdateSourceTrigger=PropertyChanged}" />
 
             <!--  Row 3  -->
             <CheckBox
@@ -116,7 +118,7 @@
                 IsChecked="{Binding Device.IsAddDefVarTable}" />
             <CheckBox
                 Grid.Row="3"
-                Grid.Column="4"
+                Grid.Column="2"
                 Margin="0,20,0,0"
                 Content="是否启用"
                 IsChecked="{Binding Device.IsActive}" />