MasterDetailPage示例

前言：MasterDetailPage可以实现左侧滑出菜单，下面把Demo的关键代码调用展示出来：

TabPage.xaml：实现底部Tab切换，多数应用都会用到这种效果。

<?xml version="1.0" encoding="utf-8" ?>
<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
                  xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
                  xmlns:local="clr-namespace:MasterDemo.Views;assembly=MasterDemo"
             x:Class="MasterDemo.Views.TabPage">
    <TabbedPage.Children >
        <local:MainPage Title="首页" Icon="ic_home.png"/>
        <local:Main1Page Title="新闻" Icon="ic_news.png"/>
        <local:Main2Page Title="我的" Icon="ic_mine.png"/>
    </TabbedPage.Children>

</xf:BottomBarPage>

其中，BottomBarPage是第三方框架，可以直接在NuGet程序包中添加引用“ThriveGmbH.BottomNavigationBar.XF”即可，注意在布局文件的头部天剑命名空间引用哦（上面的“xf”即为BottomBar的命名空间引用）。

另外，MainPage、Main1Page、Main2page为空页面示例，这里不做源码展示，注意“Icon”字段的图片需要分别下载尺寸存放于安卓（drawable）及IOS（Resource）资源路径下，如果为了省事，而选择只用一个图片尺寸，会在不同分辨率的收集下展示效果差异很大，所以还是多花点时间吧，这里给出我用的图片尺寸规则（PS：如果安卓的资源目录下没有drawable文件夹，则需要自己添加文件夹）：

类别	资源文件目录	尺寸
Android	drawable-hdpi	36
	drawable-xhdpi	48
	drawable-xxhdpi	72
IOS	最小尺寸	29
	@2x	58
	@3x	87

好了，上面就是底部导航栏页面的一些需要注意的地方，下面说一下本章的“正宫”内容吧：

这里的NavigateCommand是自定义的命令，后面会介绍，MasterDetailPage.Master即为左侧的菜单栏，MasterDetailPage.Detail即为正文内容，这里我默认为TabPage。

MasterPage.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                  prism:ViewModelLocator.AutowireViewModel="True"
                    xmlns:local="clr-namespace:MasterDemo.Views"
                  x:Class="MasterDemo.Views.MasterPage"
                  >

    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Padding="20">
                <!-- TODO: // Update the Layout and add some real menu items  -->
                <Button Text="首页" Command="{Binding NavigateCommand}" CommandParameter="TabPage" />
                <Button Text="示例一" Command="{Binding NavigateCommand}" CommandParameter="Temp1Page" />
                <Button Text="示例二" Command="{Binding NavigateCommand}" CommandParameter="Temp2Page" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:TabPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>

</MasterDetailPage>

MasterPage.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;

namespace MasterDemo.ViewModels
{
	public class MasterPageViewModel : ViewModelBase
	{
        public MasterPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {

        }

    
        private DelegateCommand<object> _navigateCommand;
        public DelegateCommand<object> NavigateCommand
        {
            get
            {
                return _navigateCommand = _navigateCommand ?? new DelegateCommand<object>(async (x) =>
                {
                    var tag = x as string;
                    switch (tag) {
                        case "TabPage":
                            await NavigationService.NavigateAsync("NavigationPage/TabPage");
                            break;
                        case "Temp1Page":
                            await NavigationService.NavigateAsync("NavigationPage/Temp1Page");
                            break;
                        case "Temp2Page":
                            await NavigationService.NavigateAsync("NavigationPage/Temp2Page");
                            break;
                    }

                });
            }

        }

    }
}

运行效果：

猜你喜欢