DMS/DMS.WPF/Views/MqttsView.xaml

<UserControl
    x:Class="DMS.WPF.Views.MqttsView"
    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:MqttsViewModel}"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="MqttItemTemplate">
            <Border
                Margin="5"
                Padding="15"
                BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsConnect}" Value="True">
                                <Setter Property="Background" Value="LightGreen" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Border.Effect>
                    <DropShadowEffect
                        BlurRadius="5"
                        Opacity="0.1"
                        ShadowDepth="1"
                        Color="Black" />
                </Border.Effect>
                <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">
                        <ToggleButton
                            DockPanel.Dock="Right"
                            Command="{Binding DataContext.ToggleIsActiveCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                            CommandParameter="{Binding }"
                            IsChecked="{Binding IsActive}"
                            Style="{StaticResource ToggleButtonSwitch}" />

                        <TextBlock
                            VerticalAlignment="Center"
                            FontSize="20"
                            FontWeight="SemiBold"
                            Text="{Binding ServerName}" />
                    </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 MessageFormat}"
                                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 ServerUrl, FallbackValue='127.0.0.1'}" />
                                <Run Text=":" />
                                <Run Text="{Binding Port, FallbackValue='1883'}" />
                            </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="未指定平台" />
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.Contact}" />
                            <TextBlock Text="{Binding ClientId}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.OtherUser}" />
                            <TextBlock Text="{Binding Username}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.Lock}" />
                            <TextBlock Text="{Binding Password}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.Send}" />
                            <TextBlock Text="{Binding PublishTopic}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.SubscriptionAdd}" />
                            <TextBlock Text="{Binding SubscribeTopic}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.Calendar}" />
                            <TextBlock Text="{Binding ConnectedAt}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.Message}" />
                            <TextBlock Text="{Binding MessageFormat}" />
                        </StackPanel>
                        <StackPanel Margin="0,2" Orientation="Horizontal">
                            <ui:FontIcon
                                Margin="0,0,8,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Icon="{x:Static ui:SegoeFluentIcons.FavoriteStar}" />
                            <!--  IsDefault 属性未在 ViewModel 中定义，已移除绑定  -->
                            <TextBlock Text="未设置默认" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

    <StackPanel>
        <!--  操作菜单栏  -->
        <ui:CommandBar DefaultLabelPosition="Right" IsOpen="False">
            <!--  添加MQTT  -->
            <ui:AppBarButton Command="{Binding AddMqttCommand}" Label="添加MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Add}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!--  编辑MQTT  -->
            <ui:AppBarButton Command="{Binding EditMqttCommand}" Label="编辑MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!--  删除MQTT  -->
            <ui:AppBarButton Command="{Binding DeleteMqttCommand}" Label="删除MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!--  查看详情  -->
            <ui:AppBarButton Command="{Binding NavigateToMqttDetailCommand}" Label="查看详情">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Document}" />
                </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 MqttItemTemplate}"
            ItemsSource="{Binding MqttServeise}"
            SelectedItem="{Binding SelectedMqtt}"
            SelectionMode="Single">
            <hc:Interaction.Triggers>
                <hc:EventTrigger EventName="MouseDoubleClick">
                    <hc:InvokeCommandAction Command="{Binding NavigateToMqttDetailCommand}" />
                </hc:EventTrigger>
            </hc:Interaction.Triggers>
        </ui:GridView>
    </StackPanel>

</UserControl>