38 KiB
软件开发文档 - DMS.WPF - 表现层与UI设计
本文档详细阐述了 DMS.WPF 项目的设计,它是系统的用户界面层。本设计严格遵循MVVM (Model-View-ViewModel) 设计模式,并强调了构建响应式UI的核心模式,包括 ItemViewModel、消息总线以及数据库驱动的动态菜单和参数化导航系统。
1. 核心设计模式
1.1. MVVM (Model-View-ViewModel)
- 设计思路:MVVM 是一种UI架构模式,旨在将UI(View)与业务逻辑和数据(Model)分离。ViewModel 作为View的抽象,负责暴露数据和命令,并处理View的交互逻辑。
- 优势:
- 职责分离:View只负责显示,ViewModel负责逻辑,Model负责数据,职责清晰,降低了复杂性。
- 可测试性:ViewModel可以独立于View进行单元测试,无需UI框架的依赖,提高了测试效率和覆盖率。
- 可维护性:UI和逻辑的修改互不影响,降低了维护成本。
- 团队协作:UI设计师和开发者可以并行工作。
- 劣势/权衡:
- 学习曲线:对于初学者来说,理解MVVM模式和数据绑定机制需要一定的学习成本。
- 样板代码:需要为每个View创建ViewModel,并实现
INotifyPropertyChanged等接口,增加了少量样板代码(但CommunityToolkit.Mvvm可以极大简化)。
1.2. ItemViewModel 模式
- 设计思路:当UI需要显示一个数据集合(如设备列表)时,集合中的每个数据项(如
DeviceDto)本身是“哑”的,不具备通知UI更新的能力。ItemViewModel模式为集合中的每个数据项创建一个专属的ViewModel(如DeviceItemViewModel),这个ViewModel“包裹”原始数据,并实现INotifyPropertyChanged。当其内部属性变化时,它会通知UI更新。 - 优势:
- 响应式UI:确保数据变化能实时、局部地反映到UI上,提供流畅的用户体验。
- 解耦:将UI更新逻辑封装在
ItemViewModel内部,与原始数据DTO分离。 - 可重用性:
ItemViewModel可以在不同的列表或详细视图中复用。
- 劣势/权衡:
- 对象膨胀:对于大型集合,每个数据项都创建一个
ItemViewModel实例,可能会增加内存消耗。 - 映射开销:需要将原始数据DTO映射到
ItemViewModel,增加了少量代码和运行时开销。
- 对象膨胀:对于大型集合,每个数据项都创建一个
1.3. 消息总线 (Messenger)
- 设计思路:消息总线(或事件聚合器)是一种发布/订阅模式的实现,用于在应用程序中解耦组件之间的通信。当后台服务(如S7通信服务)检测到设备状态变化时,它不直接调用UI层的ViewModel,而是向消息总线“发布”一条消息。任何“订阅”了该消息的ViewModel都会收到通知并做出响应。
- 优势:
- 高度解耦:生产者(消息发布者)和消费者(消息订阅者)之间没有直接引用,降低了模块间的依赖性。
- 灵活性:可以轻松添加新的消息订阅者,而无需修改消息发布者。
- 跨层通信:提供了一种安全、标准的方式进行跨层(如基础设施层到表现层)通信。
- 劣势/权衡:
- 隐式性:消息的发布和订阅是隐式的,可能导致代码流向难以追踪,增加了调试难度。
- 消息管理:如果消息类型过多或命名不规范,可能导致混乱。
- 内存泄漏风险:如果订阅者没有正确取消订阅,可能导致内存泄漏(
CommunityToolkit.Mvvm的WeakReferenceMessenger缓解了此问题)。
1.4. 依赖注入 (Dependency Injection)
- 设计思路:使用
Microsoft.Extensions.DependencyInjection统一管理所有服务的生命周期,实现松耦合。 - 优势:
- 松耦合:组件之间通过接口而非具体实现进行依赖,提高了代码的灵活性和可测试性。
- 可维护性:集中管理对象的创建和生命周期,简化了代码。
- 劣势/权衡:
- 学习曲线:对于不熟悉DI的开发者,需要一定的学习成本。
- 配置复杂性:随着项目规模的增大,DI配置可能会变得复杂。
2. 目录结构
DMS.WPF/
├── App.xaml.cs
├── Assets/
├── Extensions/
├── Helper/
├── Messages/ <-- 存放消息总线的消息类
│ ├── DeviceStatusChangedMessage.cs
│ ├── VariableValueUpdatedMessage.cs
│ ├── LoadMessage.cs
│ ├── MyMessage.cs
│ ├── NavgatorMessage.cs
│ ├── NotificationMessage.cs
│ ├── ReqMessage.cs
│ └── UpdateMenuMessage.cs
├── Models/
├── Resources/
├── Services/
│ ├── INavigatable.cs
│ ├── INavigationService.cs
│ ├── NavigationService.cs
│ ├── IDialogService.cs
│ ├── DialogService.cs
│ ├── IChannelBus.cs
│ └── ChannelBusService.cs
├── ValueConverts/
├── ViewModels/
│ ├── Base/ <-- ViewModel基类
│ │ ├── BaseViewModel.cs
│ │ └── RelayCommand.cs
│ ├── Items/ <-- ItemViewModel
│ │ ├── DeviceItemViewModel.cs
│ │ ├── MenuItemViewModel.cs
│ │ └── VariableItemViewModel.cs
│ ├── DashboardViewModel.cs
│ ├── DeviceListViewModel.cs
│ ├── DeviceDetailViewModel.cs
│ ├── VariableListViewModel.cs
│ ├── MqttServerListViewModel.cs
│ ├── MqttServerDetailViewModel.cs
│ └── MainViewModel.cs
├── Views/
│ ├── DashboardView.xaml
│ ├── DeviceListView.xaml
│ ├── DeviceDetailView.xaml
│ ├── VariableListView.xaml
│ ├── MqttServerListView.xaml
│ ├── MqttServerDetailView.xaml
│ └── MainWindow.xaml
└── DMS.WPF.csproj
3. 总体窗口设计
3.1. SplashWindow.xaml - 启动加载窗口
- View: 一个简单的窗口,显示Logo和加载状态信息(如“正在连接数据库...”、“正在加载配置...”)。
- ViewModel:
SplashViewModel- 职责: 在后台执行初始化任务(如数据库检查、加载配置、连接设备等)。每完成一步,就更新View上显示的状态文本。加载完成后,关闭自身并打开主窗口。
3.2. MainWindow.xaml - 主窗口
- View: 采用左右布局。
- 左侧: 一个
ui:NavigationView用于显示主菜单。 - 右侧: 一个
ContentControl,其Content属性绑定到当前活动视图模型的View。
- 左侧: 一个
- ViewModel:
MainViewModel- 属性:
ObservableCollection<MenuItemViewModel> MenuItems: 左侧菜单项集合。BaseViewModel CurrentViewModel: 当前在右侧显示的主视图模型。
- 命令:
NavigateCommand: 当用户点击菜单项时执行,用于切换CurrentViewModel。
- 属性:
4. 核心视图与视图模型
4.1. 控制台 (Dashboard)
- View:
DashboardView.xaml- 显示多个信息卡片,如“设备总数”、“在线设备”、“离线设备”、“消息日志”等。
- ViewModel:
DashboardViewModel- 依赖:
IDeviceAppService - 属性:
int TotalDeviceCountint OnlineDeviceCountObservableCollection<string> LogMessages
- 方法:
LoadDataAsync(): 从应用服务加载统计数据。
- 依赖:
4.2. 设备管理 (Device Management)
4.2.1. 设备列表视图
- View:
DeviceListView.xaml- 使用
DataGrid显示设备列表。 - 支持按协议 (
ProtocolType) 分组。 - 提供“添加”、“编辑”、“删除”按钮。
- 双击列表项可导航到设备详情页。
- 使用
- ViewModel:
DeviceListViewModel- 依赖:
IDeviceAppService,IDialogService,IMessenger - 属性:
ObservableCollection<DeviceItemViewModel> Devices
- 命令:
AddDeviceCommand: 打开一个对话框用于添加新设备。EditDeviceCommand: 打开对话框编辑选中设备。DeleteDeviceCommand: 删除选中设备。NavigateToDetailCommand: 导航到变量表视图。
- 依赖:
4.2.2. 变量表视图
- View:
VariableTableView.xaml(假设存在)- 显示特定设备下的所有变量表。
- 显示所选变量表的详细信息。
- 列表项可点击,导航到变量视图。
- ViewModel:
VariableTableViewModel(假设存在)- 依赖:
IVariableTableAppService - 属性:
DeviceDto CurrentDeviceObservableCollection<VariableTableDto> VariableTables
- 依赖:
4.3. MQTT服务器管理
- View:
MqttServerListView.xamlDataGrid显示所有已配置的MQTT服务器。- 提供增删改功能。
- ViewModel:
MqttServerListViewModel- 依赖:
IMqttAppService - 属性:
ObservableCollection<MqttServerDto> MqttServers
- 命令:
Add/Edit/Delete命令。
- 依赖:
4.3.1. MQTT服务器详情页
- View:
MqttServerDetailView.xaml- 显示服务器的连接信息。
- 显示一个列表,其中包含所有关联到此服务器的变量。
- ViewModel:
MqttServerDetailViewModel- 依赖:
IMqttAppService - 属性:
MqttServerDto CurrentServerObservableCollection<VariableDto> LinkedVariables
- 依赖:
5. 响应式UI实现流程
5.1. 消息定义
消息类用于在不同组件之间传递数据,实现解耦通信。
DeviceStatusChangedMessage.cs
// 文件: DMS.WPF/Messages/DeviceStatusChangedMessage.cs
namespace DMS.WPF.Messages;
/// <summary>
/// 当设备状态在后台发生变化时,通过IMessenger广播此消息。
/// </summary>
public class DeviceStatusChangedMessage
{
/// <summary>
/// 状态发生变化的设备ID。
/// </summary>
public int DeviceId { get; }
/// <summary>
/// 设备的新状态文本 (例如: "在线", "离线", "错误")。
/// </summary>
public string NewStatus { get; }
public DeviceStatusChangedMessage(int deviceId, string newStatus)
{
DeviceId = deviceId;
NewStatus = newStatus;
}
}
VariableValueUpdatedMessage.cs
// 文件: DMS.WPF/Messages/VariableValueUpdatedMessage.cs
using CommunityToolkit.Mvvm.Messaging.Messages;
namespace DMS.WPF.Messages;
/// <summary>
/// 当变量值在后台更新时,通过IMessenger广播此消息。
/// </summary>
public class VariableValueUpdatedMessage : ValueChangedMessage<object>
{
public int VariableId { get; }
public VariableValueUpdatedMessage(int variableId, object value) : base(value)
{
VariableId = variableId;
}
}
5.2. ItemViewModel接收消息
ItemViewModel 实现了 IRecipient<TMessage> 接口,当收到匹配的消息时,更新其属性,从而触发UI刷新。
DeviceItemViewModel.cs
// 文件: DMS.WPF/ViewModels/Items/DeviceItemViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using DMS.Application.DTOs;
namespace DMS.WPF.ViewModels.Items;
/// <summary>
/// 代表设备列表中的单个设备项的ViewModel。
/// 实现了INotifyPropertyChanged,其任何属性变化都会自动通知UI。
/// </summary>
public partial class DeviceItemViewModel : ObservableObject
{
public int Id { get; } // 设备ID
[ObservableProperty]
private string _name; // 设备名称
[ObservableProperty]
private string _protocol; // 协议类型
[ObservableProperty]
private string _ipAddress; // IP地址
[ObservableProperty]
private bool _isActive; // 是否激活
[ObservableProperty]
private string _status; // 设备状态,这个属性的改变会立刻反映在UI上
public DeviceItemViewModel(DeviceDto dto)
{
Id = dto.Id;
_name = dto.Name;
_protocol = dto.Protocol;
_ipAddress = dto.IpAddress;
_isActive = dto.IsActive;
_status = dto.Status; // 初始状态
}
}
VariableItemViewModel.cs
// 文件: DMS.WPF/ViewModels/Items/VariableItemViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
using DMS.Application.DTOs;
using DMS.WPF.Messages;
namespace DMS.WPF.ViewModels.Items;
/// <summary>
/// 代表变量列表中的单个变量项的ViewModel。
/// 实现了INotifyPropertyChanged,其任何属性变化都会自动通知UI。
/// 同时订阅VariableValueUpdatedMessage以实时更新值。
/// </summary>
public partial class VariableItemViewModel : ObservableObject, IRecipient<VariableValueUpdatedMessage>
{
public int Id { get; }
[ObservableProperty]
private string _name;
[ObservableProperty]
private object _value; // 绑定到UI的值,当此属性改变时,UI会自动刷新
/// <summary>
/// 构造函数,从DTO创建,并注册消息接收器。
/// </summary>
public VariableItemViewModel(VariableDto dto, IMessenger messenger)
{
Id = dto.Id;
_name = dto.Name;
_value = dto.InitialValue; // 初始值
messenger.Register<VariableValueUpdatedMessage>(this); // 注册消息接收
}
/// <summary>
/// 实现IRecipient接口,当接收到VariableValueUpdatedMessage消息时此方法被调用。
/// </summary>
public void Receive(VariableValueUpdatedMessage message)
{
if (message.VariableId == this.Id)
{
// 收到匹配的消息,更新值,UI会自动刷新
Value = message.Value; // ValueChangedMessage 的 Value 属性
}
}
}
5.3. 主ViewModel管理集合
主ViewModel(如 DeviceListViewModel 或 VariableListViewModel)持有一个 ObservableCollection<ItemViewModel>,当从应用层加载数据时,将DTOs转换为 ItemViewModel 实例并添加到集合中。
DeviceListViewModel.cs
// 文件: DMS.WPF/ViewModels/DeviceListViewModel.cs
using CommunityToolkit.Mvvm.Messaging;
using DMS.Application.Interfaces;
using DMS.WPF.Messages;
using DMS.WPF.ViewModels.Items;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;
namespace DMS.WPF.ViewModels;
/// <summary>
/// 设备列表视图的ViewModel,现在接收消息以更新设备状态。
/// </summary>
public class DeviceListViewModel : BaseViewModel, IRecipient<DeviceStatusChangedMessage>
{
private readonly IDeviceAppService _deviceAppService;
/// <summary>
/// 绑定到UI的设备集合,类型已变为DeviceItemViewModel。
/// </summary>
public ObservableCollection<DeviceItemViewModel> Devices { get; } = new();
public DeviceListViewModel(IDeviceAppService deviceAppService, IMessenger messenger)
{
_deviceAppService = deviceAppService;
// 注册消息,以便可以接收到它
messenger.Register<DeviceStatusChangedMessage>(this);
}
public override async Task LoadAsync()
{
IsBusy = true;
Devices.Clear();
var deviceDtos = await _deviceAppService.GetAllDevicesAsync();
foreach (var dto in deviceDtos)
{
Devices.Add(new DeviceItemViewModel(dto));
}
IsBusy = false;
}
/// <summary>
/// 实现IRecipient接口,当接收到DeviceStatusChangedMessage消息时此方法被调用。
/// </summary>
public void Receive(DeviceStatusChangedMessage message)
{
var deviceToUpdate = Devices.FirstOrDefault(d => d.Id == message.DeviceId);
if (deviceToUpdate != null)
{
// 直接更新ItemViewModel的属性,UI会自动响应!
deviceToUpdate.Status = message.NewStatus;
}
}
}
VariableListViewModel.cs
// 文件: DMS.WPF/ViewModels/VariableListViewModel.cs
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using DMS.Application.Interfaces;
using DMS.WPF.ViewModels.Items;
using CommunityToolkit.Mvvm.Messaging;
namespace DMS.WPF.ViewModels;
/// <summary>
/// 变量列表视图的ViewModel,管理VariableItemViewModel集合。
/// </summary>
public class VariableListViewModel : BaseViewModel
{
private readonly IVariableAppService _variableAppService;
private readonly IMessenger _messenger;
/// <summary>
/// 绑定到UI的变量集合。
/// </summary>
public ObservableCollection<VariableItemViewModel> Variables { get; } = new();
/// <summary>
/// 构造函数。
/// </summary>
public VariableListViewModel(IVariableAppService variableAppService, IMessenger messenger)
{
_variableAppService = variableAppService;
_messenger = messenger;
}
/// <summary>
/// 加载变量数据。
/// </summary>
public override async Task LoadAsync()
{
IsBusy = true;
Variables.Clear();
try
{
var variableDtos = await _variableAppService.GetAllVariablesAsync(); // 假设有此方法
foreach (var dto in variableDtos)
{
Variables.Add(new VariableItemViewModel(dto, _messenger));
}
}
finally
{
IsBusy = false;
}
}
}
5.4. View绑定
XAML中的 DataGrid 或 ItemsControl 的 ItemsSource 绑定到 ObservableCollection<ItemViewModel>,列表项的属性直接绑定到 ItemViewModel 的属性。
<!-- 文件: DMS.WPF/Views/DeviceListView.xaml -->
<DataGrid ItemsSource="{Binding Devices}" ...>
<DataGrid.Columns>
<DataGridTextColumn Header="名称" Binding="{Binding Name}" />
<!-- 这个绑定现在是响应式的 -->
<DataGridTextColumn Header="状态" Binding="{Binding Status}" />
<!-- ... -->
</DataGrid.Columns>
</DataGrid>
<!-- 文件: DMS.WPF/Views/VariableListView.xaml -->
<DataGrid ItemsSource="{Binding Variables}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="名称" Binding="{Binding Name}" />
<!-- 这个绑定现在可以实时更新了 -->
<DataGridTextColumn Header="当前值" Binding="{Binding Value}" />
<!-- ... 其他列 -->
</DataGrid.Columns>
</DataGrid>
6. 动态菜单与导航设计
6.1. 数据库设计 (DbMenu)
将菜单的结构、显示文本、图标、目标视图键以及导航参数等信息存储在数据库中,并通过 ParentId 字段实现菜单的层级关系。
DbMenu.cs
// 文件: DMS.Infrastructure/Entities/DbMenu.cs
using SqlSugar;
namespace DMS.Infrastructure.Entities;
[SugarTable("Menus")]
public class DbMenu
{
[SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
public int Id { get; set; }
[SugarColumn(IsNullable = true)]
public int? ParentId { get; set; }
public string Header { get; set; }
public string Icon { get; set; }
public string TargetViewKey { get; set; }
[SugarColumn(IsNullable = true)]
public string NavigationParameter { get; set; }
public int DisplayOrder { get; set; }
}
6.2. 核心导航契约 (DMS.WPF)
INavigatable 接口
任何需要接收导航参数的ViewModel都必须实现此接口。
// 文件: DMS.WPF/Services/INavigatable.cs
namespace DMS.WPF.Services;
/// <summary>
/// 定义了一个契约,表示ViewModel可以安全地接收导航传入的参数。
/// </summary>
public interface INavigatable
{
/// <summary>
/// 当导航到此ViewModel时,由导航服务调用此方法,以传递参数。
/// </summary>
/// <param name="parameter">从导航源传递过来的参数对象。</param>
Task OnNavigatedToAsync(object parameter);
}
INavigationService 接口与实现
将所有导航逻辑封装在一个服务中,支持基于字符串键和参数的导航。
// 文件: DMS.WPF/Services/INavigationService.cs
using System.Threading.Tasks;
namespace DMS.WPF.Services;
/// <summary>
/// 定义了应用程序的导航服务接口。
/// </summary>
public interface INavigationService
{
/// <summary>
/// 导航到由唯一键标识的视图,并传递一个参数。
/// </summary>
/// <param name="viewKey">在DI容器中注册的目标视图的唯一键(通常是ViewModel的名称)。</param>
/// <param name="parameter">要传递给目标ViewModel的参数。</param>
Task NavigateToAsync(string viewKey, object parameter = null);
}
// 文件: DMS.WPF/Services/NavigationService.cs
using DMS.WPF.ViewModels;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace DMS.WPF.Services;
/// <summary>
/// INavigationService 的实现,负责解析ViewModel并处理参数传递。
/// </summary>
public class NavigationService : INavigationService
{
private readonly IServiceProvider _serviceProvider;
private readonly MainViewModel _mainViewModel;
/// <summary>
/// 构造函数。
/// </summary>
public NavigationService(IServiceProvider serviceProvider, MainViewModel mainViewModel)
{
_serviceProvider = serviceProvider;
_mainViewModel = mainViewModel;
}
/// <summary>
/// 导航到指定键的视图,并传递参数。
/// </summary>
public async Task NavigateToAsync(string viewKey, object parameter = null)
{
if (string.IsNullOrEmpty(viewKey))
{
// 记录警告或抛出异常
return;
}
// 1. 根据viewKey获取目标ViewModel的Type
var viewModelType = GetViewModelTypeByKey(viewKey);
// 2. 从DI容器中解析出ViewModel实例
// 确保ViewModel被正确注册为Transient或Scoped
var viewModel = _serviceProvider.GetRequiredService(viewModelType) as BaseViewModel;
if (viewModel == null)
{
// 记录错误:无法解析ViewModel
throw new InvalidOperationException($"无法解析 ViewModel 类型: {viewModelType.Name}");
}
// 3. 如果ViewModel实现了INavigatable接口,则调用其OnNavigatedToAsync方法传递参数
if (viewModel is INavigatable navigatableViewModel)
{
await navigatableViewModel.OnNavigatedToAsync(parameter);
}
// 4. 设置为主窗口的当前视图,触发UI更新
_mainViewModel.CurrentViewModel = viewModel;
}
/// <summary>
/// 将字符串键映射到具体的ViewModel类型。
/// </summary>
/// <param name="key">视图键。</param>
/// <returns>对应的ViewModel类型。</returns>
/// <exception cref="KeyNotFoundException">如果未找到对应的ViewModel类型。</exception>
private Type GetViewModelTypeByKey(string key)
{
// 这是一个硬编码的映射,可以考虑通过反射或配置进行优化
return key switch
{
"DashboardView" => typeof(DashboardViewModel),
"DeviceListView" => typeof(DeviceListViewModel),
"DeviceDetailView" => typeof(DeviceDetailViewModel), // 假设有这个ViewModel
"VariableListView" => typeof(VariableListViewModel),
"MqttServerListView" => typeof(MqttServerListViewModel),
"MqttServerDetailView" => typeof(MqttServerDetailViewModel),
_ => throw new KeyNotFoundException($"未找到与键 '{key}' 关联的视图模型类型。请检查 NavigationService 的映射配置。"),
};
}
}
6.3. 菜单构建与显示
MenuItemViewModel.cs
// 文件: DMS.WPF/ViewModels/Items/MenuItemViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using DMS.WPF.Services;
using System.Collections.ObjectModel;
using System.Windows.Input;
namespace DMS.WPF.ViewModels.Items;
/// <summary>
/// 代表一个可导航的菜单项的ViewModel,用于绑定到UI的NavigationViewItem。
/// </summary>
public partial class MenuItemViewModel : ObservableObject
{
[ObservableProperty]
private string _header;
[ObservableProperty]
private string _icon;
// 导航目标键和参数,用于传递给 NavigationService
private readonly string _targetViewKey;
private readonly object _navigationParameter;
/// <summary>
/// 子菜单项集合。
/// </summary>
public ObservableCollection<MenuItemViewModel> Children { get; } = new();
/// <summary>
/// 菜单项点击时执行的导航命令。
/// </summary>
public ICommand NavigateCommand { get; }
/// <summary>
/// 构造函数。
/// </summary>
/// <param name="header">菜单显示文本。</param>
/// <param name="icon">菜单图标。</param>
/// <param name="targetViewKey">导航目标ViewModel的键。</param>
/// <param name="navigationParameter">导航时传递的参数。</param>
/// <param name="navigationService">导航服务实例。</param>
public MenuItemViewModel(string header, string icon, string targetViewKey, object navigationParameter, INavigationService navigationService)
{
_header = header;
_icon = icon;
_targetViewKey = targetViewKey;
_navigationParameter = navigationParameter;
NavigateCommand = new AsyncRelayCommand(async () =>
{
await navigationService.NavigateToAsync(_targetViewKey, _navigationParameter);
});
}
}
IMenuService (应用层/基础设施层)
此服务负责从数据库加载菜单并构建ViewModel树。
// 文件: DMS.Application/Interfaces/IMenuService.cs
using DMS.WPF.ViewModels.Items;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace DMS.Application.Interfaces;
/// <summary>
/// 定义了菜单服务接口,用于获取应用程序的导航菜单。
/// </summary>
public interface IMenuService
{
/// <summary>
/// 异步获取所有菜单项,并构建成树状结构。
/// </summary>
/// <returns>顶级菜单项的列表。</returns>
Task<List<MenuItemViewModel>> GetMenuItemsAsync();
}
// 文件: DMS.Infrastructure/Services/MenuService.cs
using DMS.Application.Interfaces;
using DMS.Core.Interfaces;
using DMS.Infrastructure.Entities;
using DMS.WPF.Services;
using DMS.WPF.ViewModels.Items;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Threading.Tasks;
namespace DMS.Infrastructure.Services;
/// <summary>
/// IMenuService 的实现,负责从数据库加载菜单并构建 MenuItemViewModel 树。
/// </summary>
public class MenuService : IMenuService
{
private readonly IRepositoryManager _repoManager;
private readonly INavigationService _navigationService;
/// <summary>
/// 构造函数。
/// </summary>
public MenuService(IRepositoryManager repoManager, INavigationService navigationService)
{
_repoManager = repoManager;
_navigationService = navigationService;
}
/// <summary>
/// 异步获取所有菜单项,并构建成树状结构。
/// </summary>
public async Task<List<MenuItemViewModel>> GetMenuItemsAsync()
{
var allDbMenus = await _repoManager.Menus.GetAllAsync();
// 将 DbMenu 转换为 MenuItemViewModel,并存储在一个字典中,方便查找
var menuItemsDict = allDbMenus.ToDictionary(
m => m.Id,
m => new MenuItemViewModel(
m.Header,
m.Icon,
m.TargetViewKey,
// 尝试解析 NavigationParameter 为对象
string.IsNullOrEmpty(m.NavigationParameter) ? null : JsonSerializer.Deserialize<object>(m.NavigationParameter),
_navigationService
)
);
var rootMenuItems = new List<MenuItemViewModel>();
foreach (var dbMenu in allDbMenus)
{
if (dbMenu.ParentId.HasValue && menuItemsDict.TryGetValue(dbMenu.ParentId.Value, out var parentMenuItem))
{
// 如果有父菜单,则添加到父菜单的Children集合中
parentMenuItem.Children.Add(menuItemsDict[dbMenu.Id]);
}
else
{
// 否则,添加到根菜单列表
rootMenuItems.Add(menuItemsDict[dbMenu.Id]);
}
}
// 根据 DisplayOrder 排序
return rootMenuItems.OrderBy(m => m.Header).ToList(); // 暂时按Header排序,实际应按DisplayOrder
}
}
6.4. 目标视图模型实现
目标ViewModel通过实现 INavigatable 接口来接收导航参数,并在 OnNavigatedToAsync 方法中加载所需数据。
DeviceDetailViewModel.cs
// 文件: DMS.WPF/ViewModels/DeviceDetailViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using DMS.Application.DTOs;
using DMS.Application.Interfaces;
using DMS.WPF.Services;
using System.Threading.Tasks;
namespace DMS.WPF.ViewModels;
/// <summary>
/// 设备详情视图的ViewModel,用于显示单个设备的详细信息。
/// 实现了INavigatable接口以接收导航参数(设备ID)。
/// </summary>
public partial class DeviceDetailViewModel : BaseViewModel, INavigatable
{
private readonly IDeviceAppService _deviceAppService;
[ObservableProperty]
private DeviceDto _device; // 假设有一个DeviceDto用于详情显示
/// <summary>
/// 构造函数。
/// </summary>
public DeviceDetailViewModel(IDeviceAppService deviceAppService)
{
_deviceAppService = deviceAppService;
}
/// <summary>
/// 当导航到此ViewModel时调用,用于加载设备详情。
/// </summary>
/// <param name="parameter">导航时传递的设备ID。</param>
public async Task OnNavigatedToAsync(object parameter)
{
// 1. 校验参数类型
if (parameter is not int deviceId)
{
// 如果参数不是期望的int类型,则处理错误(例如,记录日志,导航到错误页面,或显示提示)
// _logger.Error("导航到DeviceDetailViewModel时参数类型不匹配。");
return;
}
// 2. 使用参数加载数据
IsBusy = true;
try
{
// 假设IDeviceAppService有GetDeviceDetailAsync方法
Device = await _deviceAppService.GetDeviceByIdAsync(deviceId); // 使用现有方法
}
finally
{
IsBusy = false;
}
}
}
7. 依赖注入 (App.xaml.cs)
使用 Microsoft.Extensions.DependencyInjection 作为标准的DI容器。IMessenger 必须注册为单例,确保所有组件共享同一个消息总线实例。通常将主窗口的ViewModel注册为单例,而其他子视图的ViewModel注册为 Transient 或 Scoped。
// 文件: DMS.WPF/App.xaml.cs
using CommunityToolkit.Mvvm.Messaging;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System.Windows;
namespace DMS.WPF;
public partial class App : System.Windows.Application
{
private readonly IServiceProvider _serviceProvider;
public App()
{
var services = new ServiceCollection();
ConfigureServices(services);
_serviceProvider = services.BuildServiceProvider();
}
protected override void OnStartup(StartupEventArgs e)
{
// ... NLog初始化
var mainWindow = _serviceProvider.GetRequiredService<MainWindow>();
mainWindow.Show();
// 启动后台服务
// _serviceProvider.GetRequiredService<IHostedService>().StartAsync(CancellationToken.None); // 示例,实际可能需要更复杂的启动逻辑
}
private void ConfigureServices(IServiceCollection services)
{
// 消息总线
services.AddSingleton<IMessenger>(WeakReferenceMessenger.Default);
// 应用层 & 基础设施层服务注册 (示例)
// 假设这些服务已在各自的项目中定义并实现了接口
services.AddTransient<IRepositoryManager, RepositoryManager>();
services.AddTransient<IDeviceAppService, DeviceAppService>();
services.AddTransient<IVariableAppService, VariableAppService>();
services.AddTransient<IMqttPublishService, MqttPublishService>();
services.AddSingleton<IChannelBus, ChannelBusService>(); // ChannelBus 必须是单例
services.AddTransient<ILoggerService, NLogService>();
services.AddTransient<IMenuService, MenuService>();
// 注册后台服务为托管服务 (如果需要)
// services.AddHostedService<S7BackgroundService>();
// WPF UI 服务
services.AddSingleton<INavigationService, NavigationService>();
services.AddTransient<IDialogService, DialogService>(); // 假设有此服务
// ViewModels
services.AddSingleton<MainViewModel>(); // 主ViewModel通常是单例
services.AddTransient<DashboardViewModel>();
services.AddTransient<DeviceListViewModel>();
services.AddTransient<VariableListViewModel>();
services.AddTransient<DeviceDetailViewModel>();
services.AddTransient<MqttServerListViewModel>();
services.AddTransient<MqttServerDetailViewModel>();
// Views
services.AddSingleton<MainWindow>();
}
}
8. UI绑定与启动
8.1. MainViewModel
MainViewModel 负责从 IMenuService 加载菜单数据,并将其暴露给 MainWindow。
// 文件: DMS.WPF/ViewModels/MainViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using DMS.Application.Interfaces;
using DMS.WPF.Services;
using DMS.WPF.ViewModels.Items;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using System.Windows.Input;
namespace DMS.WPF.ViewModels;
/// <summary>
/// 主窗口的ViewModel,管理主界面的导航和菜单。
/// </summary>
public partial class MainViewModel : BaseViewModel
{
private readonly IMenuService _menuService;
private readonly INavigationService _navigationService;
/// <summary>
/// 绑定到UI的菜单项集合。
/// </summary>
public ObservableCollection<MenuItemViewModel> MenuItems { get; } = new();
[ObservableProperty]
private BaseViewModel _currentViewModel; // 当前在右侧显示的主视图模型
/// <summary>
/// 构造函数。
/// </summary>
public MainViewModel(IMenuService menuService, INavigationService navigationService)
{
_menuService = menuService;
_navigationService = navigationService;
}
/// <summary>
/// 加载菜单数据,并在启动时导航到默认视图。
/// </summary>
public override async Task LoadAsync()
{
IsBusy = true;
MenuItems.Clear();
var menus = await _menuService.GetMenuItemsAsync();
foreach(var menu in menus)
{
MenuItems.Add(menu);
}
IsBusy = false;
// 默认导航到控制台视图
await _navigationService.NavigateToAsync("DashboardView");
}
}
8.2. MainWindow.xaml
MainWindow.xaml 使用 iNKORE.UI.WPF.Modern 的 NavigationView,并绑定到 MainViewModel 的 MenuItems 集合。ContentControl 绑定到 CurrentViewModel,并使用 DataTemplate 来根据ViewModel的类型选择对应的View。
<!-- 文件: DMS.WPF/MainWindow.xaml -->
<Window x:Class="DMS.WPF.MainWindow"
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:ui="http://schemas.inkore.net/ui/xaml/controls"
xmlns:vm="clr-namespace:DMS.WPF.ViewModels"
xmlns:views="clr-namespace:DMS.WPF.Views"
mc:Ignorable="d"
Title="设备管理系统"
Height="768" Width="1024">
<Window.DataContext>
<vm:MainViewModel d:IsDataSource="True"/>
</Window.DataContext>
<Grid>
<ui:NavigationView ItemsSource="{Binding MenuItems}"
PaneDisplayMode="Left"
IsSettingsVisible="False">
<ui:NavigationView.MenuItemTemplate>
<DataTemplate>
<!-- 使用 HierarchicalDataTemplate 支持子菜单 -->
<ui:NavigationViewItem Header="{Binding Header}"
Icon="{Binding Icon}"
Command="{Binding NavigateCommand}"
ItemsSource="{Binding Children}" />
</DataTemplate>
</ui:NavigationView.MenuItemTemplate>
<!-- 右侧内容显示区域 -->
<ContentControl Content="{Binding CurrentViewModel}">
<ContentControl.Resources>
<!-- DataTemplate 用于将 ViewModel 映射到对应的 View -->
<DataTemplate DataType="{x:Type vm:DashboardViewModel}"><views:DashboardView/></DataTemplate>
<DataTemplate DataType="{x:Type vm:DeviceListViewModel}"><views:DeviceListView/></DataTemplate>
<DataTemplate DataType="{x:Type vm:DeviceDetailViewModel}"><views:DeviceDetailView/></DataTemplate>
<DataTemplate DataType="{x:Type vm:VariableListViewModel}"><views:VariableListView/></DataTemplate>
<DataTemplate DataType="{x:Type vm:MqttServerListViewModel}"><views:MqttServerListView/></DataTemplate>
<DataTemplate DataType="{x:Type vm:MqttServerDetailViewModel}"><views:MqttServerDetailView/></DataTemplate>
<!-- ... 其他 ViewModel 到 View 的映射 -->
</ContentControl.Resources>
</ContentControl>
</ui:NavigationView>
</Grid>
</Window>