专注做一家男人最爱的网站,广东建设信息中心官网,国家工程招标网公告,网络优化网站建设学习客户端添加IDialogService 弹窗服务 在首页点击添加备忘录或待办事项按钮的时候#xff0c;希望有一个弹窗#xff0c;进行相对应的内容添加操作。
一.在Views文件夹中#xff0c;再创建一个Dialog 文件夹#xff0c;用于放置备忘录和待办事项的弹窗界面。 1.1 备忘录希望有一个弹窗进行相对应的内容添加操作。
一.在Views文件夹中再创建一个Dialog 文件夹用于放置备忘录和待办事项的弹窗界面。 1.1 备忘录AddToDoView.xaml界面设计
UserControl x:ClassMyToDo.Views.Dialog.AddMemoViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MyToDo.Views.Dialogxmlns:mdhttp://materialdesigninxaml.net/winfx/xaml/themesmc:Ignorabled Width450 Height280GridGrid.RowDefinitionsRowDefinition Heightauto/RowDefinition/RowDefinition Heightauto//Grid.RowDefinitions!--标题--TextBlock Text添加待办 FontWeightBold FontSize20 Padding20,10 /!--中间内容部分--DockPanel Grid.Row1 LastChildFillFalseStackPanel DockPanel.DockTop OrientationHorizontal Margin20,10TextBlock Text状态: /ComboBoxComboBoxItem待办/ComboBoxItemComboBoxItem已完成/ComboBoxItem/ComboBox/StackPanelTextBox Margin20,0 md:HintAssist.Hint请输入待办概要 DockPanel.DockTop/TextBox Margin20,10 md:HintAssist.Hint请输入待办内容 DockPanel.DockTopTextWrappingWrap AcceptsReturnTrue MinHeight100 //DockPanel!--底部按钮--StackPanel Grid.Row2 Margin10 OrientationHorizontal HorizontalAlignmentRightButton Content取消 Margin0,0,10,0 Style{StaticResource MaterialDesignOutlinedButton}/Button Content确认//StackPanel/Grid
/UserControlTextBox 其他属性介绍 TextWrapping设置TextBox 是否换行 AcceptsReturn允许输入多行文本 MinHeight设置最小高度 1.2 待办事项AddMemoView.xaml界面设计
UserControl x:ClassMyToDo.Views.Dialog.AddMemoViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MyToDo.Views.Dialogxmlns:mdhttp://materialdesigninxaml.net/winfx/xaml/themesmc:Ignorabled Width450 Height280GridGrid.RowDefinitionsRowDefinition Heightauto/RowDefinition/RowDefinition Heightauto//Grid.RowDefinitions!--标题--TextBlock Text添加备忘录 FontWeightBold FontSize20 Padding20,10 /!--中间内容部分--DockPanel Grid.Row1 LastChildFillFalseTextBox Margin20,0 md:HintAssist.Hint请输入备忘录概要 DockPanel.DockTop/TextBox Margin20,10 md:HintAssist.Hint请输入备忘录内容 DockPanel.DockTopTextWrappingWrap AcceptsReturnTrue MinHeight100 //DockPanel!--底部按钮--StackPanel Grid.Row2 Margin10 OrientationHorizontal HorizontalAlignmentRightButton Content取消 Margin0,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 ActionIDialogResult 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 ActionIDialogResult 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){TaskBarsnew ObservableCollectionTaskBar();ToDoDtos new ObservableCollectionToDoDto();MemoDtos new ObservableCollectionMemoDto();ExecuteCommand new DelegateCommandstring(Execute);CreateTaskBars();CreateTestDate();this.dialogService dialogService;}public DelegateCommandstring ExecuteCommand { get; private set; }private ObservableCollectionTaskBar taskBars;public ObservableCollectionTaskBar TaskBars{get { return taskBars; }set { taskBars value; RaisePropertyChanged(); }}private ObservableCollectionToDoDto toDoDtos;public ObservableCollectionToDoDto ToDoDtos{get { return toDoDtos; }set { toDoDtos value; RaisePropertyChanged(); }}private ObservableCollectionMemoDto memoDtos;private readonly IDialogService dialogService;public ObservableCollectionMemoDto MemoDtos{get { return memoDtos; }set { memoDtos value; RaisePropertyChanged(); }}void CreateTaskBars(){TaskBars.Add(new TaskBar() { IconClockFast,Title汇总,Content9,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中所有的模块注入都是根据名称来进行依赖注入的。所以写对应的字符串就可以了。
