当前位置：移动技术网 > IT编程>开发语言>.net > .NET Core 3 WPF MVVM框架 Prism系列之导航系统

.NET Core 3 WPF MVVM框架 Prism系列之导航系统

2020年04月16日 | 移动技术网IT编程 | 我要评论

大学生如何赚钱,白石美咲,突袭命运之柱

本文将介绍如何在.net core3环境下使用mvvm框架prism基于区域region的导航系统

在讲解prism导航系统之前，我们先来看看一个例子,我在之前的demo项目创建一个登录界面：

我们看到这里是不是一开始想象到使用wpf带有的导航系统，通过frame和page进行页面跳转，然后通过导航日志的goback和goforward实现后退和前进，其实这是通过使用prism的导航框架实现的,下面我们来看看如何在prism的mvvm模式下实现该功能

一.区域导航

我们在上一篇介绍了prism的区域管理，而prism的导航系统也是基于区域的，首先我们来看看如何在区域导航

1.注册区域

loginwindow.xaml：

<window x:class="prismmetrosample.shell.views.login.loginwindow"
        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:local="clr-namespace:prismmetrosample.shell.views.login"
        xmlns:region="clr-namespace:prismmetrosample.infrastructure.constants;assembly=prismmetrosample.infrastructure"
        mc:ignorable="d"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         height="600" width="400" prism:viewmodellocator.autowireviewmodel="true" resizemode="noresize" windowstartuplocation="centerscreen"
        icon="pack://application:,,,/prismmetrosample.infrastructure;component/assets/photos/home, homepage, menu.png" >
    <i:interaction.triggers>
        <i:eventtrigger eventname="loaded">
            <i:invokecommandaction command="{binding loginloadingcommand}"/>
        </i:eventtrigger>
    </i:interaction.triggers>
    <grid>
        <contentcontrol prism:regionmanager.regionname="{x:static region:regionnames.logincontentregion}" margin="5"/>
    </grid>
</window>

2.注册导航

app.cs：

  protected override void registertypes(icontainerregistry containerregistry)
  {
        containerregistry.register<imedicineserivce, medicineserivce>();
        containerregistry.register<ipatientservice, patientservice>();
        containerregistry.register<iuserservice, userservice>();

        //注册全局命令
        containerregistry.registersingleton<iapplicationcommands, applicationcommands>();
        containerregistry.registerinstance<iflyoutservice>(container.resolve<flyoutservice>());

        //注册导航
        containerregistry.registerfornavigation<loginmaincontent>();
        containerregistry.registerfornavigation<createaccount>();
  }

3.区域导航

loginwindowviewmodel.cs：

public class loginwindowviewmodel:bindablebase
{

    private readonly iregionmanager _regionmanager;
    private readonly iuserservice _userservice;
    private delegatecommand _loginloadingcommand;
    public delegatecommand loginloadingcommand =>
            _loginloadingcommand ?? (_loginloadingcommand = new delegatecommand(executeloginloadingcommand));

    void executeloginloadingcommand()
    {
        //在logincontentregion区域导航到loginmaincontent
        _regionmanager.requestnavigate(regionnames.logincontentregion, "loginmaincontent");

         global.allusers = _userservice.getallusers();
    }

    public loginwindowviewmodel(iregionmanager regionmanager, iuserservice userservice)
    {
          _regionmanager = regionmanager;
          _userservice = userservice;            
    }

}

loginmaincontentviewmodel.cs：

public class loginmaincontentviewmodel : bindablebase
{
    private readonly iregionmanager _regionmanager;

    private delegatecommand _createaccountcommand;
    public delegatecommand createaccountcommand =>
            _createaccountcommand ?? (_createaccountcommand = new delegatecommand(executecreateaccountcommand));

    //导航到createaccount
    void executecreateaccountcommand()
    {
         navigate("createaccount");
    }

    private void navigate(string navigatepath)
    {
         if (navigatepath != null)
              _regionmanager.requestnavigate(regionnames.logincontentregion, navigatepath);
        
    }


    public loginmaincontentviewmodel(iregionmanager regionmanager)
    {
         _regionmanager = regionmanager;
    }

 }

效果如下：

这里我们可以看到我们调用regionmannager的requestnavigate方法，其实这样看不能很好的说明是基于区域的做法，如果将换成下面的写法可能更好理解一点：

   //在logincontentregion区域导航到loginmaincontent
  _regionmanager.requestnavigate(regionnames.logincontentregion, "loginmaincontent");

换成

 //在logincontentregion区域导航到loginmaincontent
 iregion region = _regionmanager.regions[regionnames.logincontentregion];
 region.requestnavigate("loginmaincontent");

其实regionmannager的requestnavigate源码也是大概实现也是大概如此，就是去调region的requestnavigate的方法，而region的导航是实现了一个inavigateasync接口：

public interface inavigateasync
{
   void requestnavigate(uri target, action<navigationresult> navigationcallback);
   void requestnavigate(uri target, action<navigationresult> navigationcallback, navigationparameters navigationparameters);
    
}

我们可以看到有requestnavigate方法三个形参：

target：表示将要导航的页面uri
navigationcallback:导航后的回调方法
navigationparameters:导航传递参数(下面会详解)

那么我们将上述加上回调方法：

 //在logincontentregion区域导航到loginmaincontent
 iregion region = _regionmanager.regions[regionnames.logincontentregion];
 region.requestnavigate("loginmaincontent", navigationcompelted);

 private void navigationcompelted(navigationresult result)
 {
     if (result.result==true)
     {
         messagebox.show("导航到loginmaincontent页面成功");
     }
     else
     {
         messagebox.show("导航到loginmaincontent页面失败");
     }
 }

效果如下：

二.view和viewmodel参与导航过程

1.inavigationaware

我们经常在两个页面之间导航需要处理一些逻辑，例如，loginmaincontent页面导航到createaccount页面时候，loginmaincontent退出页面的时刻要保存页面数据，导航到createaccount页面的时刻处理逻辑(例如获取从loginmaincontent页面的信息)，prism的导航系统通过一个inavigationaware接口：

    public interface inavigationaware : object
    {
        void onnavigatedto(navigationcontext navigationcontext);

        boolean isnavigationtarget(navigationcontext navigationcontext);

        void onnavigatedfrom(navigationcontext navigationcontext);
    }

onnavigatedfrom：导航之前触发,一般用于保存该页面的数据
onnavigatedto：导航后目的页面触发，一般用于初始化或者接受上页面的传递参数
isnavigationtarget：true则重用该view实例，flase则每一次导航到该页面都会实例化一次

我们用代码来演示这三个方法：

loginmaincontentviewmodel.cs：

public class loginmaincontentviewmodel : bindablebase, inavigationaware
{
     private readonly iregionmanager _regionmanager;

     private delegatecommand _createaccountcommand;
     public delegatecommand createaccountcommand =>
            _createaccountcommand ?? (_createaccountcommand = new delegatecommand(executecreateaccountcommand));

     void executecreateaccountcommand()
     {
         navigate("createaccount");
     }

     private void navigate(string navigatepath)
     {
         if (navigatepath != null)
            _regionmanager.requestnavigate(regionnames.logincontentregion, navigatepath);
     }

     public loginmaincontentviewmodel(iregionmanager regionmanager)
     {
          _regionmanager = regionmanager;
     }

     public bool isnavigationtarget(navigationcontext navigationcontext)
     {            
          return true;
     }

     public void onnavigatedfrom(navigationcontext navigationcontext)
     {
          messagebox.show("退出了loginmaincontent");
     }

     public void onnavigatedto(navigationcontext navigationcontext)
     {
          messagebox.show("从createaccount导航到loginmaincontent");
     }
 }

createaccountviewmodel.cs:

public class createaccountviewmodel : bindablebase,inavigationaware
{
     private delegatecommand _loginmaincontentcommand;
     public delegatecommand loginmaincontentcommand =>
            _loginmaincontentcommand ?? (_loginmaincontentcommand = new delegatecommand(executeloginmaincontentcommand));

     void executeloginmaincontentcommand()
     {
         navigate("loginmaincontent");
     }

     public createaccountviewmodel(iregionmanager regionmanager)
     {
         _regionmanager = regionmanager;
     }

     private void navigate(string navigatepath)
     {
        if (navigatepath != null)
            _regionmanager.requestnavigate(regionnames.logincontentregion, navigatepath);
     }

     public bool isnavigationtarget(navigationcontext navigationcontext)
     {
         return true;
     }

     public void onnavigatedfrom(navigationcontext navigationcontext)
     {
         messagebox.show("退出了createaccount");
     }

     public void onnavigatedto(navigationcontext navigationcontext)
     {
         messagebox.show("从loginmaincontent导航到createaccount");
     }

 }

效果如下：

修改isnavigationtarget为false：

public class loginmaincontentviewmodel : bindablebase, inavigationaware
{
     public bool isnavigationtarget(navigationcontext navigationcontext)
     {            
          return false;
     }
}

public class createaccountviewmodel : bindablebase,inavigationaware
{
     public bool isnavigationtarget(navigationcontext navigationcontext)
     {
         return false;
     }
 }

效果如下:

我们会发现loginmaincontent和createaccount页面的数据不见了，这是因为第二次导航到页面的时候当isnavigationtarget为false时，view将会重新实例化，导致viewmodel也重新加载,因此所有数据都清空了

2.iregionmemberlifetime

同时，prism还可以通过iregionmemberlifetime接口的keepalive布尔属性控制区域的视图的生命周期,我们在上一篇关于区域管理器说到，当视图添加到区域时候，像contentcontrol这种单独显示一个活动视图，可以通过region的activate和deactivate方法激活和失效视图，像itemscontrol这种可以同时显示多个活动视图的，可以通过region的add和remove方法控制增加活动视图和失效视图，而当视图的keepalive为false，region的activate另外一个视图时，则该视图的实例则会去除出区域，为什么我们不在区域管理器讲解该接口呢？因为当导航的时候，同样的是在触发了region的activate和deactivate，当有iregionmemberlifetime接口时则会触发region的add和remove方法，这里可以去看下prism的regionmemberlifetimebehavior源码

我们将loginmaincontentviewmodel实现iregionmemberlifetime接口，并且把keepalive设置为false，同样的将isnavigationtarget设置为true

loginmaincontentviewmodel.cs:

public class loginmaincontentviewmodel : bindablebase, inavigationaware，iregionmemberlifetime
{

     public bool keepalive => false;
     
     private readonly iregionmanager _regionmanager;

     private delegatecommand _createaccountcommand;
     public delegatecommand createaccountcommand =>
            _createaccountcommand ?? (_createaccountcommand = new delegatecommand(executecreateaccountcommand));

     void executecreateaccountcommand()
     {
         navigate("createaccount");
     }

     private void navigate(string navigatepath)
     {
         if (navigatepath != null)
            _regionmanager.requestnavigate(regionnames.logincontentregion, navigatepath);
     }

     public loginmaincontentviewmodel(iregionmanager regionmanager)
     {
          _regionmanager = regionmanager;
     }

     public bool isnavigationtarget(navigationcontext navigationcontext)
     {            
          return true;
     }

     public void onnavigatedfrom(navigationcontext navigationcontext)
     {
          messagebox.show("退出了loginmaincontent");
     }

     public void onnavigatedto(navigationcontext navigationcontext)
     {
          messagebox.show("从createaccount导航到loginmaincontent");
     }
 }

效果如下：

我们会发现跟没实现iregionmemberlifetime接口和isnavigationtarget设置为false情况一样，当keepalive为false时，通过断点知道，重新导航回loginmaincontent页面时不会触发isnavigationtarget方法，因此可以

知道判断顺序是：keepalive -->isnavigationtarget

3.iconfirmnavigationrequest

prism的导航系统还支持再导航前允许是否需要导航的交互需求，这里我们在createaccount注册完用户后寻问是否需要导航回loginmaincontent页面，代码如下：

createaccountviewmodel.cs:

public class createaccountviewmodel : bindablebase, inavigationaware，iconfirmnavigationrequest
{
     private delegatecommand _loginmaincontentcommand;
     public delegatecommand loginmaincontentcommand =>
            _loginmaincontentcommand ?? (_loginmaincontentcommand = new delegatecommand(executeloginmaincontentcommand));
    
     private delegatecommand<object> _veritycommand;
     public delegatecommand<object> veritycommand =>
            _veritycommand ?? (_veritycommand = new delegatecommand<object>(executeveritycommand));

     void executeloginmaincontentcommand()
     {
         navigate("loginmaincontent");
     }

     public createaccountviewmodel(iregionmanager regionmanager)
     {
         _regionmanager = regionmanager;
     }

     private void navigate(string navigatepath)
     {
        if (navigatepath != null)
            _regionmanager.requestnavigate(regionnames.logincontentregion, navigatepath);
     }

     public bool isnavigationtarget(navigationcontext navigationcontext)
     {
         return true;
     }

     public void onnavigatedfrom(navigationcontext navigationcontext)
     {
         messagebox.show("退出了createaccount");
     }

     public void onnavigatedto(navigationcontext navigationcontext)
     {
         messagebox.show("从loginmaincontent导航到createaccount");
     }
    
     //注册账号
     void executeveritycommand(object parameter)
     {
         if (!verityregister(parameter))
         {
                return;
         }
         messagebox.show("注册成功!");
         loginmaincontentcommand.execute();
     }
    
     //导航前询问
     public void confirmnavigationrequest(navigationcontext navigationcontext, action<bool> continuationcallback)
     {
         var result = false;
         if (messagebox.show("是否需要导航到loginmaincontent页面?", "naviagte?",messageboxbutton.yesno) ==messageboxresult.yes)
         {
             result = true;
         }
         continuationcallback(result);
      }
 }

效果如下：

三.导航期间传递参数

prism提供navigationparameters类以帮助指定和检索导航参数，在导航期间，可以通过访问以下方法来传递导航参数：

inavigationaware接口的isnavigationtarget，onnavigatedfrom和onnavigatedto方法中isnavigationtarget，onnavigatedfrom和onnavigatedto中形参navigationcontext对象的navigationparameters属性
iconfirmnavigationrequest接口的confirmnavigationrequest形参navigationcontext对象的navigationparameters属性
区域导航的inavigateasync接口的requestnavigate方法赋值给其形参navigationparameters
导航日志iregionnavigationjournal接口currententry属性的navigationparameters类型的parameters属性(下面会介绍导航日志)

这里我们createaccount页面注册完用户后询问是否需要用当前注册用户来作为登录loginid，来演示传递导航参数，代码如下：

createaccountviewmodel.cs(修改代码部分):

private string _registeredloginid;
public string registeredloginid
{
    get { return _registeredloginid; }
    set { setproperty(ref _registeredloginid, value); }
}

public bool isuserequest { get; set; }

void executeveritycommand(object parameter)
{
    if (!verityregister(parameter))
    {
        return;
    }
    this.isuserequest = true;
    messagebox.show("注册成功!");
    loginmaincontentcommand.execute();
}   

public void confirmnavigationrequest(navigationcontext navigationcontext, action<bool> continuationcallback)
{
    if (!string.isnullorempty(registeredloginid) && this.isuserequest)
    {
         if (messagebox.show("是否需要用当前注册的用户登录?", "naviagte?", messageboxbutton.yesno) == messageboxresult.yes)
         {
              navigationcontext.parameters.add("loginid", registeredloginid);
         }
    }
    continuationcallback(true);
}

loginmaincontentviewmodel.cs(修改代码部分):

public void onnavigatedto(navigationcontext navigationcontext)
{
     messagebox.show("从createaccount导航到loginmaincontent");
            
     var loginid= navigationcontext.parameters["loginid"] as string;
     if (loginid!=null)
     {
         this.currentuser = new user() { loginid=loginid};
     }
            
 }

效果如下：

四.导航日志

prism导航系统同样的和wpf导航系统一样，都支持导航日志，prism是通过iregionnavigationjournal接口来提供区域导航日志功能，

    public interface iregionnavigationjournal
    {
        bool cangoback { get; }

        bool cangoforward { get; }

        iregionnavigationjournalentry currententry {get;}

        inavigateasync navigationtarget { get; set; }

        void goback();

        void goforward();

        void recordnavigation(iregionnavigationjournalentry entry, bool persistinhistory);

        void clear();
    }

我们将在登录界面接入导航日志功能,代码如下:

loginmaincontent.xaml(前进箭头代码部分):

<textblock width="30" height="30" horizontalalignment="right" text="&#xe624;" fontweight="bold" fontfamily="pack://application:,,,/prismmetrosample.infrastructure;component/assets/fonts/#iconfont" fontsize="30" margin="10" visibility="{binding iscanexcute,converter={staticresource booltovisibilityconverter}}">
      <i:interaction.triggers>
           <i:eventtrigger eventname="mouseleftbuttondown">
                 <i:invokecommandaction command="{binding goforwardcommand}"/>
            </i:eventtrigger>
      </i:interaction.triggers>
      <textblock.style>
           <style targettype="textblock">
                <style.triggers>
                    <trigger property="ismouseover" value="true">
                          <setter property="background" value="#f9f9f9"/>
                    </trigger>
                 </style.triggers>
            </style>
      </textblock.style>
 </textblock>

booltovisibilityconverter.cs:

public class booltovisibilityconverter : ivalueconverter
{
    public object convert(object value, type targettype, object parameter, cultureinfo culture)
    {
          if (value==null)
          {
              return dependencyproperty.unsetvalue;
          }
          var iscanexcute = (bool)value;
          if (iscanexcute)
          {
              return visibility.visible;
          }
          else
          {
              return visibility.hidden;
          }
    }

    public object convertback(object value, type targettype, object parameter, cultureinfo culture)
    {
            throw new notimplementedexception();
    }
 }

loginmaincontentviewmodel.cs(修改代码部分):

iregionnavigationjournal _journal;

private delegatecommand<passwordbox> _logincommand;
public delegatecommand<passwordbox> logincommand =>
            _logincommand ?? (_logincommand = new delegatecommand<passwordbox>(executelogincommand, canexecutegoforwardcommand));

private delegatecommand _goforwardcommand;
public delegatecommand goforwardcommand =>
            _goforwardcommand ?? (_goforwardcommand = new delegatecommand(executegoforwardcommand));

private void executegoforwardcommand()
{
    _journal.goforward();
}

private bool canexecutegoforwardcommand(passwordbox passwordbox)
{
    this.iscanexcute=_journal != null && _journal.cangoforward;
    return true;
}

public void onnavigatedto(navigationcontext navigationcontext)
{
     //messagebox.show("从createaccount导航到loginmaincontent");
     _journal = navigationcontext.navigationservice.journal;

     var loginid= navigationcontext.parameters["loginid"] as string;
     if (loginid!=null)
     {
                this.currentuser = new user() { loginid=loginid};
     }
     logincommand.raisecanexecutechanged();
}

createaccountviewmodel.cs(修改代码部分):

iregionnavigationjournal _journal;

private delegatecommand _gobackcommand;
public delegatecommand gobackcommand =>
            _gobackcommand ?? (_gobackcommand = new delegatecommand(executegobackcommand));

void executegobackcommand()
{
     _journal.goback();
}

 public void onnavigatedto(navigationcontext navigationcontext)
 {
     //messagebox.show("从loginmaincontent导航到createaccount");
     _journal = navigationcontext.navigationservice.journal;
 }

效果如下：

选择退出导航日志

如果不打算将页面在导航过程中不加入导航日志，例如loginmaincontent页面，可以通过实现ijournalaware并从persistinhistory（）返回false

    public class loginmaincontentviewmodel : ijournalaware
    {
        public bool persistinhistory() => false;
    }

五.小结：

prism的导航系统可以跟wpf导航并行使用，这是prism官方文档也支持的，因为prism的导航系统是基于区域的，不依赖于wpf，不过更推荐于单独使用prism的导航系统，因为在mvvm模式下更灵活，支持依赖注入,通过区域管理器能够更好的管理视图view,更能适应复杂应用程序需求，wpf导航系统不支持依赖注入模式，也依赖于frame元素，而且在导航过程中也是容易强依赖view部分，下一篇将会讲解prism的对话框服务

六.源码

最后，附上整个demo的源代码：prismdemo源码

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

微信退款（在.net core 用http方式请求）

微信JSAPI支付申请退款接口地址接口链接：https://api.mch.weixin.qq.com/secapi/pay/refund 是否需... [阅读全文]
Owin Katana 的底层源码分析

最近看了一下开源项目asp.net katana，感觉公开的接口非常的简洁优雅，channel 9 说是受到node.js的启发设计的，Katana是一... [阅读全文]
jenkins发布application且并运行

一、发布配置差异配置：编译内容编译目标NetWorkClient/KJ90NetClient.csproj编译命令/t:build/p:Configur... [阅读全文]
WPF 简易日期控件魔改ListBox

先上截图修正：应该将SetTime方法修改为，行号为207行开始修改 var nk = Day_of_week(year, month, 1); i... [阅读全文]
DevExpress+Winform（二）

无敌模糊学习视频：https://www.bilibili.com/video/BV15x411x7WN?p=3 第三集：实现一个页面，新建devexp... [阅读全文]
DevExpress+Winform（三）

第四讲：添加GridControl，一个GridControl可以对应多个展示数据View，默认会有一个GridView。设置ShowGroupPan... [阅读全文]
docker部署netcore项目 nginx负载均衡

前言：本文主要内容是docker部署netcore应用以及docker运行nginx实现负载均衡。到目前为止感觉微软在跨平台的方面虽然有较大的进步，但... [阅读全文]
基于微信个人收款码的支付接口的实现与源码

前言如果我们希望为自己的网站增添微信扫码收款功能，用于收取一些服务费用，为个人网站提供自动化有偿服务的话，那我们有哪些方案呢？首先，我们先看下效果... [阅读全文]
asp.net搭建博客，使用BlogEngine.NET+MySql搭建博客

起因：github日推邮件中来了个BlogEngine.NET，出于好奇然后就点击链接进去查看了下，发现这TM的太适合.net新手搭建博客网站了。以前的... [阅读全文]
JWT 使用加密算法RS256 非对称加密解密

参考文档： https://gist.github.com/ssippe/8fc11c4d7e766e66f06db0431dba3f0ahttps:/... [阅读全文]