添加了 Mqtt 的界面和添加对话框
This commit is contained in:
74
Views/Dialogs/MqttDialog.xaml
Normal file
74
Views/Dialogs/MqttDialog.xaml
Normal file
@@ -0,0 +1,74 @@
|
||||
<ui:ContentDialog x:Class="PMSWPF.Views.Dialogs.MqttDialog"
|
||||
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
|
||||
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
|
||||
xmlns:vmd="clr-namespace:PMSWPF.ViewModels.Dialogs"
|
||||
xmlns:vc="clr-namespace:PMSWPF.ValueConverts"
|
||||
xmlns:ex="clr-namespace:PMSWPF.Extensions"
|
||||
xmlns:en="clr-namespace:PMSWPF.Enums"
|
||||
Title="{Binding Title}"
|
||||
CloseButtonText="取消"
|
||||
DefaultButton="Primary"
|
||||
PrimaryButtonText="{Binding PrimaryButContent}"
|
||||
Background="#fff"
|
||||
d:DataContext="{d:DesignInstance vmd:MqttDialogViewModel}"
|
||||
mc:Ignorable="d">
|
||||
<ui:ContentDialog.Resources>
|
||||
<ex:EnumBindingSource x:Key="mqttPlatform" EnumType="{x:Type en:MqttPlatform}" />
|
||||
<vc:EnumDescriptionConverter x:Key="EnumDescriptionConverter" />
|
||||
</ui:ContentDialog.Resources>
|
||||
|
||||
<Grid Width="480" Margin="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="1*" />
|
||||
<ColumnDefinition Width="1*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<!-- 左边列 -->
|
||||
<ikw:SimpleStackPanel Grid.Column="0" Margin="10 10 20 10 " Spacing="12">
|
||||
<!-- MQTT名称 -->
|
||||
<TextBlock Text="MQTT名称" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox Text="{Binding Mqtt.Name, UpdateSourceTrigger=PropertyChanged}" />
|
||||
<!-- MQTT IP地址 -->
|
||||
<TextBlock Text="MQTT IP地址" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox AcceptsReturn="True" Text="{Binding Mqtt.Host, UpdateSourceTrigger=PropertyChanged}" />
|
||||
|
||||
<!-- Mqtt平台 -->
|
||||
<TextBlock Text="Mqtt平台" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<ComboBox SelectedItem="{Binding Mqtt.Platform}" ItemsSource="{Binding Source={StaticResource mqttPlatform} }">
|
||||
<ComboBox.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<TextBlock Text="{Binding Converter={StaticResource EnumDescriptionConverter}}" />
|
||||
</DataTemplate>
|
||||
</ComboBox.ItemTemplate>
|
||||
</ComboBox>
|
||||
|
||||
<CheckBox FontSize="16" Content="是否设为默认" Margin="0 30 0 0" IsChecked="{Binding Mqtt.IsDefault}" />
|
||||
|
||||
</ikw:SimpleStackPanel>
|
||||
<!-- 右边列 -->
|
||||
<ikw:SimpleStackPanel Margin="10" Grid.Column="1" Spacing="12">
|
||||
|
||||
<!-- MQTT备注 -->
|
||||
<TextBlock Text="MQTT备注" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox Text="{Binding Mqtt.Remark, UpdateSourceTrigger=PropertyChanged}" />
|
||||
<!-- MQTT端口 -->
|
||||
<TextBlock Text="MQTT端口" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox AcceptsReturn="True" Text="{Binding Mqtt.Port, UpdateSourceTrigger=PropertyChanged}" />
|
||||
|
||||
<!-- 用户名 -->
|
||||
<TextBlock Text="用户名" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox Text="{Binding Mqtt.UserName, UpdateSourceTrigger=PropertyChanged}" />
|
||||
|
||||
<!-- 密码 -->
|
||||
<TextBlock Text="密码" HorizontalAlignment="Left" Style="{StaticResource TextBlockSubTitle}" />
|
||||
<TextBox Text="{Binding Mqtt.PassWord, UpdateSourceTrigger=PropertyChanged}" />
|
||||
|
||||
<CheckBox FontSize="16" Content="是否启用" Margin="0 30 0 0" IsChecked="{Binding Mqtt.IsActive}" />
|
||||
|
||||
</ikw:SimpleStackPanel>
|
||||
</Grid>
|
||||
|
||||
</ui:ContentDialog>
|
||||
15
Views/Dialogs/MqttDialog.xaml.cs
Normal file
15
Views/Dialogs/MqttDialog.xaml.cs
Normal file
@@ -0,0 +1,15 @@
|
||||
using System.Windows.Controls;
|
||||
using iNKORE.UI.WPF.Modern.Controls;
|
||||
|
||||
namespace PMSWPF.Views.Dialogs;
|
||||
|
||||
using PMSWPF.ViewModels.Dialogs;
|
||||
|
||||
public partial class MqttDialog : ContentDialog
|
||||
{
|
||||
public MqttDialog(MqttDialogViewModel viewModel)
|
||||
{
|
||||
InitializeComponent();
|
||||
DataContext = viewModel;
|
||||
}
|
||||
}
|
||||
136
Views/MqttsView.xaml
Normal file
136
Views/MqttsView.xaml
Normal file
@@ -0,0 +1,136 @@
|
||||
<UserControl x:Class="PMSWPF.Views.MqttsView"
|
||||
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:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
|
||||
xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
|
||||
xmlns:vm="clr-namespace:PMSWPF.ViewModels"
|
||||
d:DataContext="{d:DesignInstance vm:MqttsViewModel}"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="300"
|
||||
d:DesignWidth="300">
|
||||
<UserControl.Resources>
|
||||
<DataTemplate x:Key="MqttItemTemplate">
|
||||
<Border Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
|
||||
BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8"
|
||||
Margin="5"
|
||||
Padding="15">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="1"
|
||||
Color="Black"
|
||||
Opacity="0.1"
|
||||
BlurRadius="5" />
|
||||
</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">
|
||||
<ui:ToggleSwitch DockPanel.Dock="Right"
|
||||
IsOn="{Binding IsActive}"
|
||||
OffContent="停止"
|
||||
OnContent="启动" />
|
||||
<TextBlock Text="{Binding Name}"
|
||||
FontSize="20"
|
||||
FontWeight="SemiBold"
|
||||
VerticalAlignment="Center" />
|
||||
</DockPanel>
|
||||
|
||||
<!-- Row 1: Details with Icons -->
|
||||
<StackPanel Grid.Row="1"
|
||||
Margin="0,0,0,10">
|
||||
<StackPanel Orientation="Horizontal"
|
||||
Margin="0,2">
|
||||
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Info}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="0,0,8,0"
|
||||
FontSize="14" />
|
||||
<TextBlock Text="{Binding Remark}"
|
||||
Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal"
|
||||
Margin="0,2">
|
||||
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Connect}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="0,0,8,0"
|
||||
FontSize="14" />
|
||||
<TextBlock>
|
||||
<Run Text="{Binding Host, FallbackValue='127.0.0.1'}" />
|
||||
<Run Text=":" />
|
||||
<Run Text="{Binding Port, FallbackValue='1883'}" />
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal"
|
||||
Margin="0,2">
|
||||
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.DeveloperTools}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="0,0,8,0"
|
||||
FontSize="14" />
|
||||
<TextBlock>
|
||||
<Run Text="{Binding Platform, FallbackValue='EMQX'}" />
|
||||
</TextBlock>
|
||||
</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 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"
|
||||
SelectedItem="{Binding SelectedMqtt }"
|
||||
ItemsSource="{Binding Mqtts}"
|
||||
ItemTemplate="{StaticResource MqttItemTemplate}"
|
||||
SelectionMode="Single" />
|
||||
</StackPanel>
|
||||
|
||||
</UserControl>
|
||||
11
Views/MqttsView.xaml.cs
Normal file
11
Views/MqttsView.xaml.cs
Normal file
@@ -0,0 +1,11 @@
|
||||
using System.Windows.Controls;
|
||||
|
||||
namespace PMSWPF.Views;
|
||||
|
||||
public partial class MqttsView : UserControl
|
||||
{
|
||||
public MqttsView()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user