wcs_core/Sln.Wcs.UI/Views/HMI/PalletizerHMIView.axaml

<UserControl x:CompileBindings="False" xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="Sln.Wcs.UI.Views.HMI.PalletizerHMIView">
    <UserControl.Styles>
        <Style Selector="ToggleButton.hmiKnob">
            <Setter Property="Width" Value="48" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <ControlTemplate>
                    <Panel Width="48" Height="24">
                        <Border CornerRadius="12" Background="{DynamicResource PageBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" />
                        <Border CornerRadius="10" Background="{DynamicResource CardBgBrush}" Margin="3" />
                        <Border Name="PART_Knob" Width="18" Height="18" CornerRadius="9"
                                HorizontalAlignment="Left" Margin="3,3,0,0">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                                    <GradientStop Color="#FF5252" Offset="0" />
                                    <GradientStop Color="#B71C1C" Offset="0.5" />
                                    <GradientStop Color="#8B0000" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                                    <GradientStop Color="#FF8A80" Offset="0" />
                                    <GradientStop Color="#C62828" Offset="1" />
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border BorderThickness="1" CornerRadius="9" />
                        </Border>
                    </Panel>
                </ControlTemplate>
            </Setter>
        </Style>
        <Style Selector="ToggleButton.hmiKnob:checked /template/ Border#PART_Knob">
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="Margin" Value="0,3,3,0" />
            <Setter Property="Background">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                    <GradientStop Color="#69F0AE" Offset="0" />
                    <GradientStop Color="#00C853" Offset="0.5" />
                    <GradientStop Color="#006C2E" Offset="1" />
                </LinearGradientBrush>
            </Setter>
            <Setter Property="BorderBrush">
                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                    <GradientStop Color="#B9F6CA" Offset="0" />
                    <GradientStop Color="#00A844" Offset="1" />
                </LinearGradientBrush>
            </Setter>
        </Style>
    </UserControl.Styles>
    <ScrollViewer Margin="16,12,16,12">
        <StackPanel Spacing="10">
            <!-- Title -->
            <StackPanel Orientation="Horizontal" Spacing="10" Margin="0,0,0,4">
                <Rectangle Width="4" Height="22" Fill="{DynamicResource AccentTextBrush}" RadiusX="2" RadiusY="2" VerticalAlignment="Center" />
                <TextBlock Text="码垛机 HMI 监控界面" FontSize="17" FontWeight="Bold" Foreground="{DynamicResource TitleTextBrush}" VerticalAlignment="Center" />
            </StackPanel>

            <!-- ===== 1. 手动操作区 ===== -->
            <Border Background="{DynamicResource CardBgBrush}" CornerRadius="6" Padding="14,12" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                <StackPanel Spacing="10">
                    <TextBlock Text="手动操作" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource AccentTextBrush}" />
                    <Grid ColumnDefinitions="*,*">
                        <!-- 1# -->
                        <Border Grid.Column="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="4" Padding="12,12" Margin="0,0,6,0" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                            <StackPanel Spacing="6">
                                <TextBlock Text="1# 工位" FontSize="13" FontWeight="SemiBold" Foreground="{DynamicResource PrimaryTextBrush}" Margin="0,0,0,4" />
                                <ItemsControl ItemsSource="{Binding Manual1Items}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border Padding="6,5" Margin="0,1" Background="Transparent">
                                                <Grid ColumnDefinitions="120,100,50">
                                                    <TextBlock Grid.Column="0" Text="{Binding Name}" FontSize="11" Foreground="{DynamicResource PrimaryTextBrush}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                                                    <TextBlock Grid.Column="1" Text="{Binding Address}" FontSize="9" Foreground="{DynamicResource SubtleTextBrush}" VerticalAlignment="Center" FontFamily="Menlo,Consolas,monospace" HorizontalAlignment="Left" />
                                                    <ToggleButton Grid.Column="2" Classes="hmiKnob" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                                </Grid>
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </Border>
                        <!-- 2# -->
                        <Border Grid.Column="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="4" Padding="12,10" Margin="6,0,0,0" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                            <StackPanel Spacing="4">
                                <TextBlock Text="2# 工位" FontSize="13" FontWeight="SemiBold" Foreground="{DynamicResource PrimaryTextBrush}" Margin="0,0,0,4" />
                                <ItemsControl ItemsSource="{Binding Manual2Items}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border Padding="6,5" Margin="0,1" Background="Transparent">
                                                <Grid ColumnDefinitions="120,100,50">
                                                    <TextBlock Grid.Column="0" Text="{Binding Name}" FontSize="11" Foreground="{DynamicResource PrimaryTextBrush}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                                                    <TextBlock Grid.Column="1" Text="{Binding Address}" FontSize="9" Foreground="{DynamicResource SubtleTextBrush}" VerticalAlignment="Center" FontFamily="Menlo,Consolas,monospace" HorizontalAlignment="Left" />
                                                    <ToggleButton Grid.Column="2" Classes="hmiKnob" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                                </Grid>
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </Border>
                    </Grid>
                </StackPanel>
            </Border>

            <!-- ===== 2. 报警信息区 ===== -->
            <Border Background="{DynamicResource CardBgBrush}" CornerRadius="6" Padding="14,12" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                <StackPanel Spacing="8">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <TextBlock Text="报警信息" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource WarningBrush}" />
                        <TextBlock Text="(全部正常)" FontSize="11" Foreground="{DynamicResource MutedTextBrush}" VerticalAlignment="Center" />
                    </StackPanel>
                    <WrapPanel>
                        <ItemsControl ItemsSource="{Binding AlarmItems}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Width="230" Padding="6,4" Margin="0,0,8,4" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="3" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                                        <Grid ColumnDefinitions="Auto,*,Auto">
                                            <Ellipse Grid.Column="0" Width="8" Height="8" Fill="#00E676" VerticalAlignment="Center" Margin="0,0,6,0" />
                                            <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="11" Foreground="{DynamicResource SecondaryTextBrush}" VerticalAlignment="Center" />
                                            <TextBlock Grid.Column="2" Text="{Binding Address}" FontSize="9" Foreground="{DynamicResource SubtleTextBrush}" VerticalAlignment="Center" FontFamily="Menlo,Consolas,monospace" Margin="6,0,0,0" />
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </WrapPanel>
                </StackPanel>
            </Border>

            <!-- ===== 3 & 4. IO 输入 / IO 输出并排 ===== -->
            <Grid ColumnDefinitions="*,*">
                <!-- IO 输入 -->
                <Border Grid.Column="0" Background="{DynamicResource CardBgBrush}" CornerRadius="6" Padding="14,12" Margin="0,0,6,0" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                    <StackPanel Spacing="6">
                        <TextBlock Text="IO 输入信号" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource AccentTextBrush}" />
                        <ItemsControl ItemsSource="{Binding InputItems}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Width="210" Padding="3,2" Margin="0,1" Background="Transparent">
                                        <Grid ColumnDefinitions="Auto,*,80">
                                            <Ellipse Grid.Column="0" Width="7" Height="7" Fill="#555" VerticalAlignment="Center" Margin="0,0,6,0" />
                                            <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="11" Foreground="{DynamicResource SecondaryTextBrush}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                                            <TextBlock Grid.Column="2" Text="{Binding Address}" FontSize="9" Foreground="{DynamicResource SubtleTextBrush}" VerticalAlignment="Center" FontFamily="Menlo,Consolas,monospace" />
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Border>

                <!-- IO 输出 -->
                <Border Grid.Column="1" Background="{DynamicResource CardBgBrush}" CornerRadius="6" Padding="14,12" Margin="6,0,0,0" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1">
                    <StackPanel Spacing="6">
                        <TextBlock Text="IO 输出信号" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource AccentTextBrush}" />
                        <ItemsControl ItemsSource="{Binding OutputItems}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Width="210" Padding="3,2" Margin="0,1" Background="Transparent">
                                        <Grid ColumnDefinitions="Auto,*,80">
                                            <Ellipse Grid.Column="0" Width="7" Height="7" Fill="#555" VerticalAlignment="Center" Margin="0,0,6,0" />
                                            <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="11" Foreground="{DynamicResource SecondaryTextBrush}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                                            <TextBlock Grid.Column="2" Text="{Binding Address}" FontSize="9" Foreground="{DynamicResource SubtleTextBrush}" VerticalAlignment="Center" FontFamily="Menlo,Consolas,monospace" />
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Border>
            </Grid>
        </StackPanel>
    </ScrollViewer>
</UserControl>