第二十五章：页面变化（二）

探索行为
让我们用名为MasterDetailBehaviors的程序探索这些行为。 该程序定义了三个页面，名为DemoPage（源自MasterDetailPage），以及两个作为MasterDetailPage子项的ContentPage派生。 这些名为MasterPage和DetailPage。
MasterPage和DetailPage非常相似。 这是MasterPage：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterDetailBehaviors.MasterPage"
             Title="Master Page"
             Padding="10"
             x:Name="masterPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
 
    <Frame OutlineColor="Accent">
        <StackLayout Orientation="Horizontal"
                     Spacing="0"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">
            <Label Text="{Binding Source={x:Reference masterPage},
                                  Path=Width,
                                  StringFormat='Master: {0:F0}'}"
                   FontSize="Large" />
            <Label Text="{Binding Source={x:Reference masterPage},
                                  Path=Height,
                                  StringFormat=' &#x00D7; {0:F0}'}"
                   FontSize="Large" />
        </StackLayout>
    </Frame>
</ContentPage>

它包含一个带有一对Label元素的Frame，用于显示页面的宽度和高度。 请注意，标题属性已设置，页面包含标准填充，以避免重叠iPhone上的状态栏。
DetailPage不包含该Padding。 你会发现这是不必要的。 但是和MasterPage一样，这个页面也设置了Title属性并包含一个带有一对Label元素的Frame来显示宽度和高度：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterDetailBehaviors.DetailPage"
             Title="Detail Page"
             Padding="10"
             x:Name="detailPage">
 
    <Frame OutlineColor="Accent">
        <StackLayout Orientation="Horizontal"
                     Spacing="0"
                     VerticalOptions="CenterAndExpand"
                     HorizontalOptions="Center">
            <Label Text="{Binding Source={x:Reference detailPage},
                                  Path=Width,
                                  StringFormat='Detail: {0:F0}'}"
                   FontSize="Large"/>
            <Label Text="{Binding Source={x:Reference detailPage},
                                  Path=Height,
                                  StringFormat=' &#x00D7; {0:F0}'}"
                   FontSize="Large" /> 
        </StackLayout>
    </Frame>
</ContentPage>

您还需要一个源自MasterDetailPage的页面。 要在Visual Studio中添加此类页面，请使用Forms Xaml Page模板将新项添加到项目中; 在Xamarin Studio中，使用Forms ContentPage Xaml模板向项目添加新文件。 这将创建一个派生自ContentPage的页面，但您可以在XAML文件和C＃代码隐藏文件中简单地将ContentPage更改为MasterDetailPage。
这是以MasterDetailPage为根元素的DemoPage的XAML文件：

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterDetailBehaviors"
             x:Class="MasterDetailBehaviors.DemoPage"
             Title="Demo Page"
             MasterBehavior="Default">
    <MasterDetailPage.Master>
        <local:MasterPage />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:DetailPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

MasterDetailPage.Master和MasterDetailPage.Detail属性元素分别设置为MasterPage和DetailPage的实例，但略有不同：Detail属性设置为NavigationPage，x：Arguments标记指定DetailPage作为构造函数参数。 这是启用用户界面所必需的，该界面允许用户在通用Windows平台上的主页面和详细页面之间切换。
另请注意，MasterBehavior属性在根标记中设置为Default。 您可以尝试不同的设置。
App构造函数将MainPage属性设置为DemoPage。 Xamarin.Forms程序不应导航到MasterDetailPage：

namespace MasterDetailBehaviors
{
    public class App : Application
    {
        public App()
        {
            MainPage = new DemoPage();
        }    
        __
    }
}

首次运行程序时，默认情况下最初会显示详细信息页面：

在所有三个平台上，标题通过显示DetailPage的Title属性将其标识为详细信息页面。 iPhone还会显示MasterPage的标题。
在三个平台上，从详细页面切换到主页的操作是不同的：

• 在iOS上，向右滑动详细信息页面，或点击标题中的母版页文本。
• 在Android上，从手机的左边缘向右滑动，或点击左上角的箭头。
• 在Windows 10 Mobile上，点击左上角的菜单图标。

这是切换后的结果：

主页面现在可见。就MasterBehavior枚举而言，主页面通过Popover行为变得可见，但三个屏幕截图显示了平台之间的差异：

• iOS上的行为是幻灯片。主页面从左侧滑入时，详细信息页面向右滑动;您仍然可以看到详细信息页面的左侧部分。
• Android是一个叠加层。很难分辨，因为详细信息页面已淡出，但仔细观察，您可以在屏幕最右侧的DetailPage中看到Frame。
• Windows10 Mobile也是一张幻灯片。您可以在母版页后面看到详细信息页面。

在iOS和Android上，母版页的宽度略小于屏幕的宽度。
要返回iOS上的详细信息页面，请向左滑动。在Android上，向左滑动母版页，点击屏幕最右侧详细页面的可见部分，或点击屏幕底部的后三角形。在Windows Phone上，再次点击菜单图标或后退箭头。
您将在横向模式下看到这三个平台的类似行为，除了主页与纵向模式下的母版页具有相似的宽度，这导致更多详细信息页面可见：

如果您尝试使用MasterDetailPage的MasterBehavior属性的不同设置，您将发现此属性对手机没有影响。 电话总是有弹出行为。 只有在iPad和Windows平板电脑和桌面上才能看到分离行为。
在横向模式的iPad上，MasterBehavior.Default设置会导致拆分行为：

但是，您可以控制行为。 如果将MasterBehavior属性设置为Popover，您将获得一个覆盖详细信息页面的母版页，就像在iPhone上一样。
对于处于纵向模式的iPad，默认设置与Popover相同，您需要选择Split或SplitOnPortrait以纵向模式获得分屏。
SplitOnLandscape和SplitOnPortrait选项允许您对纵向和横向模式使用不同的行为。 平板电脑和桌面的默认情况下，SplitOnLandscape设置最有意义：主视图和详细视图在横向模式下共享屏幕，但当平板电脑转为纵向模式时，详细视图占用了 全屏和母版页面覆盖它。
这是在平板电脑模式下运行在Surface Pro 3上的程序：

这是一种分裂行为。 如果以纵向模式启动平板电脑，您将看到弹出窗口行为，您可以使用MasterBehavior属性的不同设置控制行为。
在Windows 8.1和Windows Phone 8.1上，在主服务器和详细信息之间切换的用户界面略有不同。 自动提供工具栏项以在主数据和详细信息之间切换：

Windows 8.1屏幕显示拆分行为，但如果将其设置为弹出窗口，则需要右键单击屏幕以显示工具栏。 Windows Phone 8.1屏幕正常显示工具栏。 您负责设置工具栏按钮图像和相关文本。 无论主视图还是详细视图都可见，图像和文本都是相同的。 文本是从母版页的Title属性设置的，在本例中是“Master Page”。
按钮的位图是从母版页的Icon属性设置的。 （此Icon属性实际上由Page定义，并由所有其他页面衍生物继承。）Windows 8.1和Windows Phone 8.1项目都被赋予了一个名为Images的文件夹。 该文件夹的内容是PNG文件。 MasterPage的代码隐藏文件中的构造函数将该位图设置为Icon属性：

public partial class MasterPage : ContentPage
{
    public MasterPage()
    {
        InitializeComponent();
        if (Device.OS == TargetPlatform.WinPhone ||
            Device.OS == TargetPlatform.Windows)
        {
            Icon = new FileImageSource
            {
                File = "Images/ApplicationBar.Select.png"
            };
        }
    }
}

如果未在代码隐藏文件或XAML文件中设置该图标属性，则工具栏按钮将显示在没有图像的Windows 8.1和Windows Phone 8.1平台上。
点击工具栏图标可在详细信息和主文件之间切换：