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:localConverters="clr-namespace:DMS.WPF.Converters"
    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>
        <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"
                Background="White"
                BorderBrush="#E0E0E0"
                BorderThickness="1"
                CornerRadius="8">
                <Border.Effect>
                    <DropShadowEffect
                        BlurRadius="5"
                        Opacity="0.1"
                        ShadowDepth="2"
                        Color="#888888" />
                </Border.Effect>

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <!--  设备基本信息区域  -->
                    <StackPanel Grid.Row="0" Margin="0,0,0,15">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <!--  设备名称和描述  -->
                            <StackPanel Grid.Column="0">
                                <StackPanel Margin="0,0,0,5" Orientation="Horizontal">
                                    <ui:FontIcon
                                        Margin="0,0,8,0"
                                        FontSize="20"
                                        Foreground="{DynamicResource SystemAccentColorBrush}"
                                        Glyph="&#xE975;" />
                                    <TextBlock
                                        VerticalAlignment="Center"
                                        FontSize="16"
                                        FontWeight="SemiBold"
                                        Text="{Binding Name}" />
                                </StackPanel>

                                <TextBlock
                                    Margin="0,0,0,8"
                                    FontSize="13"
                                    Foreground="#666666"
                                    Text="{Binding Description}"
                                    TextWrapping="Wrap" />

                                <StackPanel Orientation="Horizontal">
                                    <ui:FontIcon
                                        Margin="0,0,5,0"
                                        FontSize="14"
                                        Foreground="#888888"
                                        Glyph="&#xE76C;" />
                                    <TextBlock
                                        FontSize="12"
                                        Foreground="#888888"
                                        Text="{Binding DeviceType}" />

                                    <Rectangle
                                        Width="1"
                                        Height="12"
                                        Margin="10,0"
                                        Fill="#CCCCCC" />

                                    <ui:FontIcon
                                        Margin="10,0,5,0"
                                        FontSize="14"
                                        Foreground="#888888"
                                        Glyph="&#xE8F4;" />
                                    <TextBlock
                                        FontSize="12"
                                        Foreground="#888888"
                                        Text="{Binding IsRunning, Converter={StaticResource BoolToStringConverter}, ConverterParameter='已连接;未连接'}" />
                                </StackPanel>
                            </StackPanel>

                            <!--  状态指示器  -->
                            <StackPanel
                                Grid.Column="1"
                                VerticalAlignment="Top"
                                Orientation="Horizontal">
                                <Border
                                    Margin="0,0,10,0"
                                    Background="{Binding IsRunning, Converter={StaticResource BoolToColorConverter}, ConverterParameter='Green;Red'}"
                                    CornerRadius="8">
                                    <TextBlock
                                        Margin="10,5"
                                        FontSize="14"
                                        FontWeight="Bold"
                                        Foreground="White"
                                        Text="{Binding IsRunning, Converter={StaticResource BoolToStringConverter}, ConverterParameter='已连接;未连接'}" />
                                </Border>

                                <ToggleButton
                                    x:Name="ExpandToggleButton"
                                    Background="Transparent"
                                    BorderThickness="0"
                                    Foreground="#666666"
                                    IsChecked="True"
                                    Style="{StaticResource DefaultToggleButtonStyle}"
                                    ToolTip="展开/收起变量表">
                                    <ToggleButton.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ChevronUp}" />
                                        </StackPanel>
                                    </ToggleButton.Content>
                                </ToggleButton>
                            </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
                                    Padding="12,8"
                                    Background="#F0F0F0"
                                    BorderBrush="#E0E0E0"
                                    BorderThickness="0,0,0,1"
                                    CornerRadius="6,6,0,0">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <TextBlock
                                            Grid.Column="0"
                                            FontSize="14"
                                            FontWeight="SemiBold"
                                            Foreground="#333333"
                                            Text="变量表列表" />

                                        <Button
                                            Grid.Column="1"
                                            Width="28"
                                            Height="28"
                                            Padding="0"
                                            Command="{Binding DataContext.AddVariableTableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                            CommandParameter="{Binding}"
                                            Content="&#xE710;"
                                            FontFamily="Segoe MDL2 Assets"
                                            FontSize="14"
                                            Style="{StaticResource DefaultButtonStyle}"
                                            ToolTip="添加变量表" />
                                    </Grid>
                                </Border>

                                <!--  变量表列表  -->
                                <ItemsControl Margin="0" ItemsSource="{Binding VariableTables}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border
                                                Padding="12,10"
                                                Background="White"
                                                BorderBrush="#EEEEEE"
                                                BorderThickness="0,0,0,1">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*" />
                                                        <ColumnDefinition Width="Auto" />
                                                    </Grid.ColumnDefinitions>

                                                    <StackPanel Grid.Column="0">
                                                        <StackPanel Margin="0,0,0,3" Orientation="Horizontal">
                                                            <ui:FontIcon
                                                                Margin="0,0,6,0"
                                                                FontSize="14"
                                                                Foreground="{DynamicResource SystemAccentColorBrush}"
                                                                Glyph="&#xE8EC;" />
                                                            <TextBlock
                                                                FontSize="13"
                                                                FontWeight="SemiBold"
                                                                Text="{Binding Name}" />
                                                        </StackPanel>

                                                        <TextBlock
                                                            MaxWidth="300"
                                                            FontSize="11"
                                                            Foreground="#888888"
                                                            Text="{Binding Description}"
                                                            TextWrapping="Wrap" />
                                                    </StackPanel>

                                                    <StackPanel Grid.Column="1" Orientation="Horizontal">
                                                        <TextBlock
                                                            Margin="0,0,5,0"
                                                            VerticalAlignment="Center"
                                                            FontSize="12"
                                                            Foreground="#666666"
                                                            Text="{Binding Variables.Count}" />
                                                        <TextBlock
                                                            VerticalAlignment="Center"
                                                            FontSize="12"
                                                            Foreground="#888888"
                                                            Text="变量" />

                                                        <Button
                                                            Width="26"
                                                            Height="26"
                                                            Margin="8,0,0,0"
                                                            Padding="0"
                                                            Command="{Binding DataContext.EditVariableTableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                                            CommandParameter="{Binding}"
                                                            Style="{StaticResource DefaultButtonStyle}"
                                                            ToolTip="编辑变量表">
                                                            <Button.Content>
                                                                <StackPanel Orientation="Horizontal">
                                                                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                                                                </StackPanel>
                                                            </Button.Content>
                                                        </Button>

                                                        <Button
                                                            Width="26"
                                                            Height="26"
                                                            Margin="4,0,0,0"
                                                            Padding="0"
                                                            Command="{Binding DataContext.DeleteVariableTableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                                            CommandParameter="{Binding}"
                                                            Content="&#xE74D;"
                                                            FontFamily="Segoe MDL2 Assets"
                                                            FontSize="14"
                                                            Style="{StaticResource DefaultButtonStyle}"
                                                            ToolTip="删除变量表" />
                                                    </StackPanel>
                                                </Grid>
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>

                                <!--  空状态提示  -->
                                <TextBlock
                                    Padding="20,15"
                                    HorizontalAlignment="Center"
                                    FontSize="13"
                                    Foreground="#AAAAAA"
                                    Text="暂无变量表"
                                    Visibility="{Binding VariableTables, Converter={StaticResource CountToVisibilityConverter}}" />
                            </StackPanel>
                        </Border>
                    </StackPanel>

                    <!--  操作按钮区域  -->
                    <StackPanel
                        Grid.Row="2"
                        HorizontalAlignment="Right"
                        Orientation="Horizontal">
                        <Button
                            Width="36"
                            Height="36"
                            Margin="0,0,8,0"
                            Padding="0"
                            Style="{StaticResource AccentButtonStyle}"
                            ToolTip="连接设备">
                            <!-- <Button.Effect> -->
                            <!--  <DropShadowEffect BlurRadius="3"  -->
                            <!--  Opacity="0.2"  -->
                            <!--  ShadowDepth="1"  -->
                            <!--  Color="{DynamicResource SystemAccentColor}" />  -->
                            <!-- </Button.Effect> -->
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">
                                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Connect}" />
                                </StackPanel>
                            </Button.Content>
                        </Button>

                        <Button
                            Width="36"
                            Height="36"
                            Margin="0,0,8,0"
                            Padding="0"
                            Command="{Binding DataContext.EditDeviceCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                            CommandParameter="{Binding}"
                            ToolTip="编辑设备">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">
                                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                                </StackPanel>
                            </Button.Content>
                        </Button>

                        <Button
                            Width="36"
                            Height="36"
                            Margin="0,0,8,0"
                            Padding="0"
                            Style="{StaticResource DefaultButtonStyle}"
                            ToolTip="监控设备">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">
                                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.TVMonitor}" />
                                </StackPanel>
                            </Button.Content>
                        </Button>

                        <Button
                            Width="36"
                            Height="36"
                            Padding="0"
                            Command="{Binding DataContext.DeleteDeviceCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                            CommandParameter="{Binding}"
                            Style="{StaticResource ButtonDanger.Small}"
                            ToolTip="删除设备">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">
                                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </StackPanel>
                </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 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>