第二十四章:页面导航(九)

简介: 数据传输模式多页面应用程序中的页面通常需要共享数据,特别是一页面将信息传递到另一页面。 有时此过程类似于函数调用:当HomePage显示项目列表并导航到DetailPage以显示其中一个项目的详细视图时,HomePage必须将该特定项目传递给DetailPage。

数据传输模式

多页面应用程序中的页面通常需要共享数据,特别是一页面将信息传递到另一页面。 有时此过程类似于函数调用:当HomePage显示项目列表并导航到DetailPage以显示其中一个项目的详细视图时,HomePage必须将该特定项目传递给DetailPage。 或者当用户在FillOutFormPage中输入信息时,必须将该信息返回到调用FillOutFormPage的页面。
有几种技术可用于在页面之间传输数据。 您使用哪一个取决于具体的应用程序。 请记住,在整个讨论过程中,您可能还需要在应用程序终止时保存页面内容,并在程序重新启动时恢复内容。 一些数据共享技术比其他技术更有利于保存和恢复页面状态。 本章稍后将更详细地探讨此问题。
构造函数参数
当一个页面导航到另一个页面并需要将数据传递到该页面时,传递该数据的一种显而易见的方法是通过第二个页面的构造函数。
SchoolAndStudents计划说明了这种技术。 该程序使用了第19章“集合视图”中介绍的SchoolOfFineArt库。该程序由两个名为SchoolPage和StudentPage的页面组成。 SchoolPage类使用ListView显示学校中所有学生的可滚动列表。 当用户选择一个时,程序导航到显示有关个别学生的详细信息的学生页面。 该程序与第19章中的SelectedStudentDetail程序类似,不同之处在于列表和详细信息已分为两页。
这是SchoolPage。 为了使事情尽可能简单,ListView使用ImageCell显示学校中的每个学生:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolAndStudents.SchoolPage"
             Title="School">

    <StackLayout BindingContext="{Binding StudentBody}">
        <Label Text="{Binding School}"
               FontSize="Large"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

        <ListView x:Name="listView"
                  ItemsSource="{Binding Students}"
                  ItemSelected="OnListViewItemSelected">
            <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>

此XAML文件中的数据绑定假定页面的BindingContext设置为SchoolOfFineArt库中定义的SchoolViewModel类型的对象。 SchoolViewModel具有StudentBody类型的属性,该属性设置为StackLayout的BindingContext。 Label绑定到StudentBody的School属性,ListView的ItemsSource绑定到StudentBody的Students集合属性。 这意味着ListView中的每个项都有一个Student类型的BindingContext。 ImageCell引用该Student对象的PhotoFilename,FullName和GradePointAverage属性。
这是在iOS,Android和Windows 10 Mobile上运行的ListView:
2019_04_23_095724
代码隐藏文件中的构造函数负责从SchoolViewModel的实例设置页面的BindingContext。 代码隐藏文件还包含ListView的ItemSelected事件的处理程序。 当用户点击其中一个学生时会触发此事件:

public partial class SchoolPage : ContentPage
{
    public SchoolPage()
    {
        InitializeComponent();
        // Set BindingContext.
        BindingContext = new SchoolViewModel();
    }
    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs args)
    {
        // The selected item is null or of type Student.
        Student student = args.SelectedItem as Student;
        // Make sure that an item is actually selected.
        if (student != null)
        {
            // Deselect the item.
            listView.SelectedItem = null;
            // Navigate to StudentPage with Student argument.
            await Navigation.PushAsync(new StudentPage(student));
        }
    }
}

事件参数的SelectedItem属性是被轻击的Student对象,处理程序将其用作PushAsync调用中StudentPage类的参数。
另请注意,处理程序将ListView的SelectedItem属性设置为null。 这取消选择该项目,以便在用户返回SchoolPage和用户时仍然选择它
可以再次点击它。 但是将SelectedItem属性设置为null也会导致对ItemSelected事件处理程序的另一次调用。 幸运的是,如果SelectedItem为null,则处理程序会忽略该事件。
StudentPage的代码隐藏文件只是使用该构造函数参数来设置页面的Bind ingContext:

public partial class StudentPage : ContentPage
{
    public StudentPage(Student student)
    {
        InitializeComponent();
        BindingContext = student;
    }
}

StudentPage类的XAML文件包含对Student类的各种属性的绑定:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="SchoolAndStudents.StudentPage"
 Title="Student">
    <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>

XAML文件不需要按钮或任何其他用户界面对象返回到SchoolPage,因为它是作为平台的标准导航用户界面的一部分或作为手机本身的一部分自动提供的:
2019_04_23_100104
通过构造函数将信息传递到导航页面是通用的,但对于这个特定的示例,它是不必要的。 StudentPage可以有一个无参数构造函数,而SchoolPage可以在PushAsync调用中设置新创建的StudentPage的BindingContext:

await Navigation.PushAsync(new StudentPage { BindingContext = student });

任何一种方法的问题之一是在程序暂停时保留应用程序状态。 如果希望StudentPage在程序终止时保存当前学生,则需要保存Student对象的所有属性。 但是当程序再次启动时重新创建该Student对象时,它与Students集合中同一学生的特定Student对象不同,即使所有属性都相同。
如果已知学生集合是常量,则StudentPage更有意义的是仅将一个索引保存到引用此特定Student对象的Students集合中。 但在此示例中,StudentPage无权访问该索引或学生集合。

目录
相关文章
|
存储 人机交互 UED
网站导航设计方法总结
网站导航设计攻略
909 0
|
Android开发 索引 iOS开发
第二十四章:页面导航(十七)
像现实生活中的应用程序理想情况下,用户在终止并重新启动应用程序时不应该知道。应用程序体验应该是连续且无缝的。即使程序没有一直运行,一个半月进入的条目从未完成也应该在一周后处于相同的状态。NoteTaker程序允许用户记录由标题和一些文本组成的注释。
524 0
|
XML JSON Android开发
第二十四章:页面导航(十五)
保存和恢复页面状态特别是当您开始使用多页面应用程序时,将应用程序的页面视为数据的主要存储库非常有用,而仅仅是作为底层数据的临时可视化和交互式视图。这里的关键词是暂时的。如果您在用户与之交互时保持基础数据是最新的,那么页面可以显示和消失而不必担心。
629 0
|
JavaScript 前端开发 Android开发
第二十四章:页面导航(十六)
保存和恢复导航堆栈 许多多页面应用程序的页面体系结构比DataTransfer6更复杂,您需要一种通用的方法来保存和恢复整个导航堆栈。此外,您可能希望将导航堆栈的保存与系统方式集成,以保存和恢复每个页面的状态,特别是如果您不使用MVVM。
463 0
|
JavaScript Android开发
第二十四章:页面导航(十四)
切换到ViewModel此时应该很明显,Information类应该真正实现INotifyPropertyChanged。 在DataTransfer5中,Information类已成为InformationViewModel类。
572 0
|
JavaScript Android开发 索引
第二十四章:页面导航(十)
属性和方法调用调用PushAsync或PushModalAsync的页面显然可以直接访问它导航到的类,因此它可以设置属性或调用该页面对象中的方法以将信息传递给它。但是,调用PopAsync或PopModalAsync的页面还有一些工作要做,以确定它返回的页面。
523 0
|
Android开发
第二十四章:页面导航(八)
动态页面生成BuildAPage程序是一个多页面应用程序,但BuildAPage项目只包含一个名为BuildAPageHomePage的页面类。 顾名思义,该程序从代码构造一个新页面,然后导航到它。XAML文件允许您在此构造的页面上指定所需内容: <ContentPage xmlns="http://xamarin.
651 0
|
Android开发 索引
第二十四章:页面导航(十二)
事件在方法调用方法和消息中心通信方法中,信息页面需要知道主页的类型。 如果可以从不同类型的页面调用相同的信息页面,这有时是不合需要的。这个问题的一个解决方案是info类实现一个事件,这就是DataTransfer3中采用的方法。
491 0
|
Android开发 索引
第二十四章:页面导航(十一)
消息中心您可能不喜欢两个页面类直接相互调用方法的想法。 它似乎适用于小样本,但对于具有大量类间通信的大型程序,您可能更喜欢一些不需要实际页面实例的更灵活的东西。这样的工具是Xamarin.Forms MessagingCenter类。
524 0