DMS/DMS.WPF/Views/DevicesView.xaml

<UserControl
    x:Class="DMS.WPF.Views.DevicesView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:hc="https://handyorg.github.io/handycontrol"
    xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
    xmlns:vm="clr-namespace:DMS.WPF.ViewModels"
    d:DataContext="{d:DesignInstance vm:DevicesViewModel}"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="DeviceItemTemplate">
            <Border
                Margin="5"
                Padding="15"
                Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
                BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <Border.Effect>
                    <DropShadowEffect
                        BlurRadius="5"
                        Opacity="0.1"
                        ShadowDepth="1"
                        Color="Black" />
                </Border.Effect>
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsRunning}" Value="True">
                                <Setter Property="Background" Value="Aquamarine" />
                            </DataTrigger>

                        </Style.Triggers>
                    </Style>
                </Border.Style>


                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </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>

                    <!--  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>
    </UserControl.Resources>

    <StackPanel>
        <!--  操作菜单栏  -->
        <ui:CommandBar DefaultLabelPosition="Right" IsOpen="False">
            <!--  添加设备  -->
            <ui:AppBarButton Command="{Binding AddDeviceCommand}" Label="添加设备">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Add}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!--  编辑设备  -->
            <ui:AppBarButton Command="{Binding EditDeviceCommand}" Label="编辑设备">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!--  编辑设备  -->
            <ui:AppBarButton Command="{Binding DeleteDeviceCommand}" Label="删除设备">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <ui:AppBarButton x:Name="ShareButton" Label="Share">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Share}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <ui:CommandBar.SecondaryCommands>
                <ui:AppBarButton
                    x:Name="SettingsButton"
                    Icon="Setting"
                    Label="Settings" />
            </ui:CommandBar.SecondaryCommands>
        </ui:CommandBar>


        <ui:GridView
            x:Name="BasicGridView"
            Margin="20"
            IsItemClickEnabled="True"
            ItemTemplate="{StaticResource DeviceItemTemplate}"
            ItemsSource="{Binding DataServices.Devices}"
            SelectedItem="{Binding SelectedDevice}"
            SelectionMode="Single">
            <hc:Interaction.Triggers>
                <hc:EventTrigger EventName="MouseDoubleClick">
                    <hc:InvokeCommandAction Command="{Binding NavigateToDetailCommand}" />
                </hc:EventTrigger>
            </hc:Interaction.Triggers>
        </ui:GridView>
    </StackPanel>

</UserControl>