回到学校
到目前为止,在本书中你已经看到了一些使用ListView来展示美术学院学生的程序。这些程序都有不同的方法来显示其中一个学生的详细外观。第19章“集合视图”中的SelectedStudentDetail程序在屏幕的上半部分显示了ListView,在下半部分显示了详细信息。学校和学生
第24章“页面导航”中的程序使用页面导航来显示ListView中的学生。现在让我们使用MasterDetailPage来完成这项工作,并将其命名为SchoolAndDetail。
SchoolAndDetail程序和MasterDetailBehaviors之间的一个主要区别涉及程序的构建方式。不是为主页面和详细信息页面提供单独的类,而是将所有内容合并到一个派生自MasterDetailPage的类中。
这个单一类(如下所示)名为SchoolAndDetailPage。主页面和详细信息页面的布局在MasterDetailPage.Master和MasterDetailPage.Detail属性元素标记中定义。
根标记设置名为IsPresented的MasterDetailPage的属性。此属性允许程序在XAML中以编程方式或声明方式在主视图和详细视图之间切换。默认值为false,表示显示详细信息页面,但此XAML文件的根元素将其设置为True以在启动时显示母版页:
<!--<UserControl x:Class="NMS.Mantis.Statistics.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:NMS.Mantis.Statistics"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
</Grid>
</UserControl>-->
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:school="clr-namespace:SchoolOfFineArt;assembly=SchoolOfFineArt"
x:Class="SchoolAndDetail.SchoolAndDetailPage"
IsPresented="True">
<MasterDetailPage.Master>
<ContentPage Title="School">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
WinPhone="Images/refresh.png" />
</ContentPage.Icon>
<ContentPage.BindingContext>
<school:SchoolViewModel />
</ContentPage.BindingContext>
<StackLayout BindingContext="{Binding StudentBody}">
<Label Text="{Binding School}"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center" />
<ListView x:Name="listView"
ItemsSource="{Binding Students}"
ItemTapped="OnListViewItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell ImageSource="{Binding PhotoFilename}"
Text="{Binding FullName}"
Detail="{Binding GradePointAverage,
StringFormat='G.P.A. = {0:F2}'}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<!-- Detail Page -->
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage Title="{Binding FirstName}"
BindingContext="{Binding Source={x:Reference listView},
Path=SelectedItem}">
<StackLayout>
<!-- Name -->
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center"
Spacing="0">
<StackLayout.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="FontSize" Value="Large" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Label Text="{Binding LastName}" />
<Label Text="{Binding FirstName, StringFormat=', {0}'}" />
<Label Text="{Binding MiddleName, StringFormat=' {0}'}" />
</StackLayout>
<!-- Photo -->
<Image Source="{Binding PhotoFilename}"
VerticalOptions="FillAndExpand" />
<!-- Sex -->
<Label Text="{Binding Sex, StringFormat='Sex = {0}'}"
HorizontalOptions="Center" />
<!-- GPA -->
<Label Text="{Binding GradePointAverage, StringFormat='G.P.A. =
{0:F2}'}"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
另请注意,标题和图标属性是在母版页上设置的。 Windows 8.1和Windows Phone 8.1项目包含一个带有“刷新”图标的Images目录,该图标也可能表示切换操作。 母版页还将SchoolViewModel实例化为MasterPageBase.BindingContext属性元素标记中的对象。
将所有内容放在单个XAML文件中的一个优点是,您可以在主页面和详细信息页面之间建立数据绑定。 用作详细信息页面的ContentPage的BindingContext绑定到ListView的SelectedItem属性。
除了这些差异之外,页面定义本身与前一章中的SchoolAndStudents程序非常相似。
程序启动显示母版页,其中包括与学生一起的ListView:
该程序有另一种从主页面切换到详细页面的方法。 代码隐藏文件包含ListView的ItemTapped事件的简单处理程序:
public partial class SchoolAndDetailPage : MasterDetailPage
{
public SchoolAndDetailPage()
{
InitializeComponent();
}
void OnListViewItemTapped(object sender, ItemTappedEventArgs args)
{
// Show the detail page.
IsPresented = false;
}
}
ItemTapped和ItemSelected之间的区别在于,即使已经选择了项目,ItemTapped仍然有效。 ItemTapped处理程序不会取消选择该项。 这样可以保持ListView中所选项目与详细信息页面内容之间的一致性。
这是您点按后会看到的详细信息页面:
要返回iOS上的母版页,请向右滑动。 在Android上,从左边缘向右滑动或点按顶部的箭头。 在Windows 10 Mobile上,点击左上角的菜单图标。
在Android和Windows Phone上,点击屏幕底部的后退箭头将退出程序。 后退箭头将从主页切换到详细信息,但不会从详细信息切换到主页。
这是在iPad Air 2模拟器上运行的程序,显示主和详细信息的并排显示: