第二十五章:页面变化(三)

简介: 回到学校到目前为止,在本书中你已经看到了一些使用ListView来展示美术学院学生的程序。这些程序都有不同的方法来显示其中一个学生的详细外观。第19章“集合视图”中的SelectedStudentDetail程序在屏幕的上半部分显示了ListView,在下半部分显示了详细信息。

回到学校
到目前为止,在本书中你已经看到了一些使用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:
2019_05_07_105240
该程序有另一种从主页面切换到详细页面的方法。 代码隐藏文件包含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中所选项目与详细信息页面内容之间的一致性。
这是您点按后会看到的详细信息页面:
2019_05_07_105441
要返回iOS上的母版页,请向右滑动。 在Android上,从左边缘向右滑动或点按顶部的箭头。 在Windows 10 Mobile上,点击左上角的菜单图标。
在Android和Windows Phone上,点击屏幕底部的后退箭头将退出程序。 后退箭头将从主页切换到详细信息,但不会从详细信息切换到主页。
这是在iPad Air 2模拟器上运行的程序,显示主和详细信息的并排显示:
2019_05_07_105528

目录
相关文章
|
4天前
|
存储 前端开发 JavaScript
【亮剑】在Web开发中,滚动事件(onScroll)是一个常见且强大的交互手段。
【4月更文挑战第30天】在React中,利用`onScroll`事件可实现无限滚动、动态加载和视差效果。通过`componentDidMount`和`componentWillUnmount`(类组件)或`useEffect`(函数组件)添加/移除滚动监听器。为了优化性能,需注意节流、防抖、虚拟滚动和避免同步计算。实战案例展示了如何结合Intersection Observer实现无限滚动列表,当最后一个帖子进入视口时加载更多数据。关注性能,确保应用流畅。
|
4天前
|
开发工具 索引
点击一个消除游戏图标时,背后都发生了什么
点击一个消除游戏图标时,背后都发生了什么
33 1
|
7月前
|
索引
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
84 0
|
7月前
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
32 0
|
7月前
|
存储 小程序 算法
【易售小程序项目】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】
【易售小程序项目】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】
46 0
|
10月前
|
数据采集 监控 数据可视化
做出酷炫的动态统计图表,不一定要写代码
首先这个名字很长的,就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目,并在 github 上开源了。
|
传感器 网络协议 物联网
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
快速学习5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量。
277 0
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
|
前端开发
前端工作总结128-一级控制二级菜单的变化
前端工作总结128-一级控制二级菜单的变化
72 0
前端工作总结128-一级控制二级菜单的变化
|
前端开发
前端工作总结227-数据渲染
前端工作总结227-数据渲染
65 0
前端工作总结227-数据渲染
好客租房140-长列表性能优化(可视区域渲染)
好客租房140-长列表性能优化(可视区域渲染)
76 0
好客租房140-长列表性能优化(可视区域渲染)