Wpf 使用 Prism 实战开发Day22

客户端添加IDialogService 弹窗服务

在首页点击添加备忘录或待办事项按钮的时候，希望有一个弹窗，进行相对应的内容添加操作。

一.在Views文件夹中，再创建一个Dialog 文件夹，用于放置备忘录和待办事项的弹窗界面。

1.1 备忘录（AddToDoView.xaml）界面设计

<UserControl x:Class="MyToDo.Views.Dialog.AddMemoView"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:local="clr-namespace:MyToDo.Views.Dialog"xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d" Width="450" Height="280"><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/><RowDefinition Height="auto"/></Grid.RowDefinitions><!--标题--><TextBlock Text="添加待办" FontWeight="Bold" FontSize="20" Padding="20,10" /><!--中间内容部分--><DockPanel Grid.Row="1" LastChildFill="False"><StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="20,10"><TextBlock Text="状态:" /><ComboBox><ComboBoxItem>待办</ComboBoxItem><ComboBoxItem>已完成</ComboBoxItem></ComboBox></StackPanel><TextBox Margin="20,0" md:HintAssist.Hint="请输入待办概要" DockPanel.Dock="Top"/><TextBox Margin="20,10" md:HintAssist.Hint="请输入待办内容" DockPanel.Dock="Top"TextWrapping="Wrap" AcceptsReturn="True" MinHeight="100" /></DockPanel><!--底部按钮--><StackPanel Grid.Row="2" Margin="10" Orientation="Horizontal" HorizontalAlignment="Right"><Button Content="取消" Margin="0,0,10,0" Style="{StaticResource MaterialDesignOutlinedButton}"/><Button Content="确认"/></StackPanel></Grid>
</UserControl>

TextBox 其他属性介绍

TextWrapping：设置TextBox 是否换行

AcceptsReturn：允许输入多行文本

MinHeight：设置最小高度

---

1.2 待办事项（AddMemoView.xaml）界面设计

<UserControl x:Class="MyToDo.Views.Dialog.AddMemoView"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:local="clr-namespace:MyToDo.Views.Dialog"xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d" Width="450" Height="280"><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/><RowDefinition Height="auto"/></Grid.RowDefinitions><!--标题--><TextBlock Text="添加备忘录" FontWeight="Bold" FontSize="20" Padding="20,10" /><!--中间内容部分--><DockPanel Grid.Row="1" LastChildFill="False"><TextBox Margin="20,0" md:HintAssist.Hint="请输入备忘录概要" DockPanel.Dock="Top"/><TextBox Margin="20,10" md:HintAssist.Hint="请输入备忘录内容" DockPanel.Dock="Top"TextWrapping="Wrap" AcceptsReturn="True" MinHeight="100" /></DockPanel><!--底部按钮--><StackPanel Grid.Row="2" Margin="10" Orientation="Horizontal" HorizontalAlignment="Right"><Button Content="取消" Margin="0,0,10,0" Style="{StaticResource MaterialDesignOutlinedButton}"/><Button Content="确认"/></StackPanel></Grid>
</UserControl>

二.界面设计完成后,接着在ViewModel 中，同样创建一个Dialog 文件夹，放置对应的界面后台处理逻辑。并且要继承自 IDialogAware 接口。

2.1 创建 AddToDoViewModel 类，继承 IDialogAware接口，并实现接口。

    public class AddToDoViewModel : IDialogAware{public string Title {  get; set; }public event Action<IDialogResult> RequestClose;public bool CanCloseDialog(){return true;}public void OnDialogClosed(){}public void OnDialogOpened(IDialogParameters parameters){}}

---

2.2 创建 AddMemoViewModel类，继承 IDialogAware接口，并实现接口。

public class AddMemoViewModel : IDialogAware
{public string Title { get; set; }public event Action<IDialogResult> RequestClose;public bool CanCloseDialog(){return true;}public void OnDialogClosed(){}public void OnDialogOpened(IDialogParameters parameters){}
}

三.接着，在App.xaml 中使用 RegisterDialog 注册弹窗，进行依赖注入

四.完成以上步骤后,在主窗口界面进行使用.

1.修改主窗口 IndexView.xaml 界面，当点击对应按钮时，弹出对应的Dialog.

1.1 给主页备忘录和待办事项按钮添加对应的命令，以及命令携带的参数

1.2 对应的后台（IndexViewModel）逻辑处理，并且通过IDialogService 去调用到弹窗界面

public class IndexViewModel:BindableBase
{public IndexViewModel(IDialogService dialogService){TaskBars=new ObservableCollection<TaskBar>();ToDoDtos = new ObservableCollection<ToDoDto>();MemoDtos = new ObservableCollection<MemoDto>();ExecuteCommand = new DelegateCommand<string>(Execute);CreateTaskBars();CreateTestDate();this.dialogService = dialogService;}public DelegateCommand<string> ExecuteCommand { get; private set; }private ObservableCollection<TaskBar> taskBars;public ObservableCollection<TaskBar> TaskBars{get { return taskBars; }set { taskBars = value; RaisePropertyChanged(); }}private ObservableCollection<ToDoDto> toDoDtos;public ObservableCollection<ToDoDto> ToDoDtos{get { return toDoDtos; }set { toDoDtos = value; RaisePropertyChanged(); }}private ObservableCollection<MemoDto> memoDtos;private readonly IDialogService dialogService;public ObservableCollection<MemoDto> MemoDtos{get { return memoDtos; }set { memoDtos = value; RaisePropertyChanged(); }}void CreateTaskBars(){TaskBars.Add(new TaskBar() { Icon="ClockFast",Title="汇总",Content="9",Color="#FF0CA0FF",Target=""});TaskBars.Add(new TaskBar() { Icon = "ClockCheckOutline", Title = "已完成", Content = "9", Color = "#FF1ECA3A", Target = "" });TaskBars.Add(new TaskBar() { Icon = "ChartLineVariant", Title = "完成比例", Content = "9%", Color = "#FF02C6DC", Target = "" });TaskBars.Add(new TaskBar() { Icon = "PlaylistStar", Title = "备忘录", Content = "18", Color = "#FFFFA000", Target = "" });}void CreateTestDate(){for (int i = 0; i < 10; i++){ToDoDtos.Add(new ToDoDto { Title="待办"+i,Content="正在处理中.."});MemoDtos.Add(new MemoDto { Title = "备忘" + i, Content = "我的密码" });}}private void Execute(string obj){switch(obj){case "新增备忘录":dialogService.Show("AddMemoView");break;case "新增待办事项":dialogService.Show("AddToDoView");break;}}
}

注意： dialogService.Show中，直接填写字符串，就能找到对应的弹窗。是因为在App中，所有的模块注入都是根据名称来进行依赖注入的。所以写对应的字符串就可以了。