区域
所谓区域,就是用户界面中,专门划分出一块屏幕,用来显示不同的工作空间。比如当下流行管理系统,左边是导航栏,上面的header区域一般用来放用户信息,部门信息,message,当前页面路径登,content区域用来作为工作空间。如果有必要还要加一个foot区域。
现在来修改上一篇文章中,通过模板生成的主页,使它分为左右两块,左边作为菜单栏,右边作为工作空间
<Window
x:Class="AppManager.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:core="clr-namespace:AppManager.Core;assembly=AppManager.Core"
xmlns:prism="http://prismlibrary.com/"
Title="{Binding Title}"
Width="525"
Height="350"
prism:ViewModelLocator.AutoWireViewModel="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel>
<Button
Margin="5"
Command="{Binding NavigateCommand}"
CommandParameter="UserView">
用户管理
</Button>
<Button
Margin="5"
Command="{Binding NavigateCommand}"
CommandParameter="DeptView">
部门管理
</Button>
<Button
Margin="5"
Command="{Binding NavigateCommand}"
CommandParameter="MenuView">
菜单管理
</Button>
</StackPanel>
<ContentControl Grid.Column="1" prism:RegionManager.RegionName="{x:Static core:RegionNames.ContentRegion}" />
</Grid>
</Window>
启动以后,它显示是这样子的
那么我现在需要实现的操作是,通过点击不同的按钮,进入到不同的页面,也就是改变我的content区域。那么就需要做以下操作
注册区域
创建需要刷新的页面
首先找到AppManager(之前创建项目的名字)下的Views,右键,添加,新建项,选择Prism UserControl(WPF),然后输入文件名进行创建(这个模板需要安装上一篇文章中提到的Prism Template Pack),使用这个模板,不仅把xaml,xaml.cs文件创建好了,还把ViewModels文件创建好了,甚至还把prism:ViewModelLocator.AutoWireViewModel="True"也写好了,相当方便。
创建3个页面,现在目录是这个样子的
然后修改以下各个页面的内容,在之后的操作中好区分一下,它确实刷新了区域的内容
<UserControl
x:Class="AppManager.Views.UserView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True">
<Grid>
<TextBlock FontSize="20">userview</TextBlock>
</Grid>
</UserControl>
上面的TextBlock内容更改成页面名字就行
注册区域
既然创建好了页面,那么现在要做的就是告诉prism,我把页面创建好了,这些页面都交给你保管,一会儿我点一个按钮告诉你,我需要什么页面,你再把页面给我。
打开app.xaml.cs,找到RegisterTypes这个函数,不用管已经写好的代码,直接添加新的代码,修改后的代码是这个样子的
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterSingleton<IMessageService, MessageService>();
containerRegistry.RegisterForNavigation<UserView>();
containerRegistry.RegisterForNavigation<DeptView>();
containerRegistry.RegisterForNavigation<MenuView>();
}
在后面的参数中,可以给注册的页面命名,默认的就是页面自己的名字
给按钮添加动作
好了,现在已经把页面交给prism了,那么我就需要给按钮添加命令了,让按钮告诉prism,我需要什么页面,你把页面刷新到指定的区域中去。
修改MainWindowViewModel.cs文件
using AppManager.Core;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
namespace AppManager.ViewModels
{
public class MainWindowViewModel : BindableBase
{
private string _title = "Prism Application";
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
public readonly IRegionManager regionManager;
public DelegateCommand<string> NavigateCommand { get;private set; }
public MainWindowViewModel(IRegionManager regionManager)
{
this.regionManager = regionManager;
NavigateCommand = new DelegateCommand<string>((MenuName) => {
regionManager.Regions[RegionNames.ContentRegion].RequestNavigate(MenuName);
});
}
}
}
添加一个public readonly IRegionManager regionManager;
以及一个public DelegateCommand NavigateCommand { get;private set; }
IRegionManager就是prism的区域管理者,刚才交给prism的页面内容,由它来还给我们,而DelegateCommand就是按钮点击后触发事件的管理者了
然后回头看一开始的MainWindow.xaml
<Button
Margin="5"
Command="{Binding NavigateCommand}"
CommandParameter="UserView">
用户管理
</Button>
这个button调用了NavigateCommand这个函数,这个函数干了什么事呢,让RegionNames.ContentRegion这个区域,刷新成参数传过来的页面,这里的这个按钮,参数是CommandParamter=“UserView”(之前注册区域的时候,没有加参数,默认就是页面的名称)也就是跳转到用户管理页面
那么这个RegionNames.ContentRegion区域在哪里呢,继续看主页面的代码
<ContentControl Grid.Column="1" prism:RegionManager.RegionName="{x:Static core:RegionNames.ContentRegion}" />
这里就是之前一开始规划的content区域
最后的效果就是点击用户管理后,将content区域跳转到用户管理界面