IOT/MainModule/Views/MainView.xaml

<UserControl x:Class="MainModule.Views.MainView"
             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:converters="clr-namespace:UIShare.Converters;assembly=UIShare"
             mc:Ignorable="d"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             d:DesignHeight="1080"
             d:DesignWidth="1920">
    <UserControl.Resources>
        <converters:BooleanToVisibilityConverter x:Key="BoolToVis" />
    </UserControl.Resources>

    <Grid Background="#F4F6F9">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <DockPanel Grid.Row="0" Margin="12,4,12,16">
            <TextBlock Text="环境箱监控状态面板" FontSize="20" FontWeight="Bold" Foreground="#2C3E50" VerticalAlignment="Center"/>
            
            <!-- 顶部工具栏按钮 -->
            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                <!-- 配置连接按钮 -->
                <Button Content="配置连接" 
                        Command="{Binding ConfigCommand}"
                        Style="{StaticResource MaterialDesignFlatButton}"
                        Foreground="#805AD5"
                        FontSize="13"
                        Margin="0,0,8,0"
                        ToolTip="配置设备连接参数"/>
                
                <!-- 连接/断开按钮 -->
                <Button Content="{Binding ConnectButtonText}" 
                        Command="{Binding ConnectCommand}"
                        Style="{StaticResource MaterialDesignFlatButton}"
                        Foreground="#3182CE"
                        FontSize="13"
                        Margin="0,0,8,0"
                        ToolTip="点击连接/断开设备">
                    <Button.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="连接设备" Command="{Binding ConnectCommand}"/>
                            <MenuItem Header="断开连接" Command="{Binding DisconnectCommand}"/>
                        </ContextMenu>
                    </Button.ContextMenu>
                </Button>
                
                <!-- 刷新按钮 -->
                <Button Content="刷新数据" 
                        Command="{Binding RefreshCommand}"
                        Style="{StaticResource MaterialDesignFlatButton}"
                        Foreground="#38A169"
                        FontSize="13"
                        ToolTip="手动刷新设备数据"/>
            </StackPanel>
        </DockPanel>

        <ItemsControl Grid.Row="1" ItemsSource="{Binding Chambers}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="2" Rows="2" Margin="-6"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Background="White" BorderBrush="#E2E8F0" BorderThickness="1" CornerRadius="8" Margin="6" Padding="20">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="8" Color="#A0AEC0" Opacity="0.15" ShadowDepth="1"/>
                        </Border.Effect>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <DockPanel Grid.Row="0" LastChildFill="False">
                                <StackPanel DockPanel.Dock="Left">
                                    <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold" Foreground="#1A202C"/>
                                    <TextBlock Text="{Binding ProtocolType, StringFormat=驱动协议: {0}}" FontSize="12" Foreground="#718096" Margin="0,2,0,0"/>
                                </StackPanel>

                                <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Center">
                                    <Border Width="10" Height="10" CornerRadius="5" Margin="0,0,6,0" VerticalAlignment="Center">
                                        <Border.Style>
                                            <Style TargetType="Border">
                                                <Setter Property="Background" Value="#E53E3E"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding IsConnected}" Value="True">
                                                        <Setter Property="Background" Value="#38A169"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Border.Style>
                                    </Border>
                                    <TextBlock VerticalAlignment="Center" FontSize="13" FontWeight="Medium">
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Text" Value="OFFLINE"/>
                                                <Setter Property="Foreground" Value="#E53E3E"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding IsConnected}" Value="True">
                                                        <Setter Property="Text" Value="ONLINE"/>
                                                        <Setter Property="Foreground" Value="#38A169"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                </StackPanel>
                            </DockPanel>

                            <UniformGrid Grid.Row="1" Columns="2" Margin="0,20,0,0">
                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <TextBlock Text="温度采集" FontSize="13" Foreground="#718096" HorizontalAlignment="Center"/>
                                    <StackPanel Orientation="Horizontal" Margin="0,6,0,0">
                                        <TextBlock Text="{Binding Temperature, StringFormat={}{0:F1}}" FontSize="40" FontWeight="Light" Foreground="#3182CE"/>
                                        <TextBlock Text=" ℃" FontSize="16" Foreground="#3182CE" VerticalAlignment="Bottom" Margin="2,0,0,8"/>
                                    </StackPanel>
                                </StackPanel>

                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <TextBlock Text="湿度采集" FontSize="13" Foreground="#718096" HorizontalAlignment="Center"/>
                                    <StackPanel Orientation="Horizontal" Margin="0,6,0,0">
                                        <TextBlock Text="{Binding Humidity, StringFormat={}{0:F1}}" FontSize="40" FontWeight="Light" Foreground="#319795"/>
                                        <TextBlock Text=" %RH" FontSize="16" Foreground="#319795" VerticalAlignment="Bottom" Margin="2,0,0,8"/>
                                    </StackPanel>
                                </StackPanel>
                            </UniformGrid>

                            <!-- 连接按钮 -->
                            <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,16,0,0">
                                <Button Content="{Binding ConnectButtonText}" 
                                        Command="{Binding DataContext.ConnectDeviceCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                        CommandParameter="{Binding}"
                                        Width="100" 
                                        Height="36">
                                    <Button.Style>
                                        <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatButton}">
                                            <Setter Property="Foreground" Value="#3182CE"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding IsConnected}" Value="True">
                                                    <Setter Property="Foreground" Value="#E53E3E"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Button.Style>
                                </Button>
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>