004.新建注册页面+页面跳转实现

一.新建页面及页面的注册使用

1.新建一个Views文件夹(必要),用于管理新建页面

2.新建页面

maui支持这种页面格式

新建的页面系统并不能识别他,需要在AppShell.xaml.cs类中的构造函数中注册这些新建的页面

页面注册语法:

Routing.RegisterRoute(nameof(home), typeof(home));//注册新建的页面

AppShell.xaml.cs类完整代码如下

using MauiApp2.Views;//命名空间引入Views文件夹

namespace MauiApp2
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(HomePage), typeof(HomePage));//注册新建的页面
            // Routing.RegisterRoute(nameof(TestPage), typeof(TestPage));//注册其他新建的页面也是这样叠加
        }
    }
}

3.注册好的页面,如果想作为启动的首要启动,则需要在AppShell.xaml文件如下配置

3-1.命名空间下加上下面这一条代码表示,是把Views作为视图文件view配置给这个类

xmlns:views="clr-namespace:MAUI_APP2.Views" //向xaml文件注入Views文件夹URL

3-2.启动首页的路由修改

contentemplate属性为启动首页的路由,在这里设置要将那个页面设置为启动首页,因为新建页面都是用view容器注册的,要将新的页面做为启动页,需要用views属性来带出路由,下面是设置了home页面作为新的启动首页

ContentTemplate="{DataTemplate views:home}"

3-3.同时,启动页Route属性也要写成和启动路由页面一样类名home

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp2"    
    xmlns:views="clr-namespace:MauiApp2.Views"
    Title="MauiApp2">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate views:HomePage}"
        Route="home" />

</Shell>

程序重新运行后就会进入home页面启动了

二.页面的调转

按上述1至3-1布置新建页面和注册路由后,保持ContentTemplate配置项为默认MainPage启动页

这样app启动的默认页就是MainPage页面

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp2"    
    xmlns:views="clr-namespace:MauiApp2.Views"
    Title="MauiApp2">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

1.在启动页面MianPage的button按钮事件中跳转到home页面

页面重构语法:  Shell.Current.GoToAsync(nameof(页面));

MauiPage.cs

using MauiApp2.Views;

namespace MauiApp2
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object? sender, EventArgs e)
        {
            Shell.Current.GoToAsync(nameof(HomePage));//跳转到home页面
        }
    }
}

运行结果:

按下按键后,页面跳转到Home Page页面