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

简介: 动态页面生成BuildAPage程序是一个多页面应用程序,但BuildAPage项目只包含一个名为BuildAPageHomePage的页面类。 顾名思义,该程序从代码构造一个新页面,然后导航到它。XAML文件允许您在此构造的页面上指定所需内容:<ContentPage xmlns="http://xamarin.

动态页面生成
BuildAPage程序是一个多页面应用程序,但BuildAPage项目只包含一个名为BuildAPageHomePage的页面类。 顾名思义,该程序从代码构造一个新页面,然后导航到它。
XAML文件允许您在此构造的页面上指定所需内容:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BuildAPage.BuildAPageHomePage"
             Title="Build-a-Page"
             Padding="10, 5">
    <StackLayout>
        <Label Text="Enter page title:" />
        <Entry x:Name="titleEntry"
               Placeholder="page title" />
        <Grid VerticalOptions="FillAndExpand">
            <ContentView Grid.Row="0">
                <StackLayout>
                    <Label Text="Tap to add to generated page:" />
                    <ListView x:Name="viewList"
                              ItemSelected="OnViewListItemSelected">
                        <ListView.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>BoxView</x:String>
                                <x:String>Button</x:String>
                                <x:String>DatePicker</x:String>
                                <x:String>Entry</x:String>
                                <x:String>Slider</x:String>
                                <x:String>Stepper</x:String>
                                <x:String>Switch</x:String>
                                <x:String>TimePicker</x:String>
                            </x:Array>
                        </ListView.ItemsSource>
                    </ListView>
                </StackLayout>
            </ContentView>

            <ContentView Grid.Row="1">
                <StackLayout>
                    <Label Text="Tap to remove from generated page:" />
                    <ListView x:Name="pageList"
                              ItemSelected="OnPageListItemSelected" />
                </StackLayout>
            </ContentView>
        </Grid>

        <Button x:Name="generateButton"
                Text="Generate the Page!"
                IsEnabled="False"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Clicked="OnGenerateButtonClicked" />
    </StackLayout>
</ContentPage>

使用页面顶部的条目为构造的页面指定Title属性。 然后,ListView会列出您在页面上可能需要的八个常见视图。 当您选择这些视图时,它们将被传输到第二个ListView。 如果要从页面中删除其中一个,只需在第二个ListView中点击它。
以下是您为页面选择了一些元素后的样子。 请注意,您可以选择多个相同类型的元素,每个元素都有一个唯一的数字:
2019_04_22_145931
当你完成“设计”你的页面时,只需点击生成页面! 底部的按钮,程序构建该页面并导航到它:
2019_04_22_150016
代码隐藏文件具有两个ListView元素的ItemSelected处理程序,用于添加项目和从第二个ListView中删除项目,但Button的Clicked处理程序中发生了更有趣的处理:

public partial class BuildAPageHomePage : ContentPage
{
    ObservableCollection<string> viewCollection = new ObservableCollection<string>();
    Assembly xamarinForms = typeof(Label).GetTypeInfo().Assembly;
    public BuildAPageHomePage()
    {
        InitializeComponent();
        pageList.ItemsSource = viewCollection;
    }
    void OnViewListItemSelected(object sender, SelectedItemChangedEventArgs args)
    {
        if (args.SelectedItem != null)
        {
            viewList.SelectedItem = null;
            int number = 1;
            string item = null;
            while (-1 != viewCollection.IndexOf(
            item = ((string)args.SelectedItem) + ' ' + number))
            {
                number++;
            }
            viewCollection.Add(item);
            generateButton.IsEnabled = true;
        }
    }
    void OnPageListItemSelected(object sender, SelectedItemChangedEventArgs args)
    {
        if (args.SelectedItem != null)
        {
            pageList.SelectedItem = null;
            viewCollection.Remove((string)args.SelectedItem);
            generateButton.IsEnabled = viewCollection.Count > 0;
        }
    }
    async void OnGenerateButtonClicked(object sender, EventArgs args)
    {
        ContentPage contentPage = new ContentPage
        {
            Title = titleEntry.Text,
            Padding = new Thickness(10, 0)
        };
        StackLayout stackLayout = new StackLayout();
        contentPage.Content = stackLayout;
        foreach (string item in viewCollection)
        {
            string viewString = item.Substring(0, item.IndexOf(' '));
            Type viewType = xamarinForms.GetType("Xamarin.Forms." + viewString);
            View view = (View)Activator.CreateInstance(viewType);
            view.VerticalOptions = LayoutOptions.CenterAndExpand;
            switch (viewString)
            {
                case "BoxView":
                    ((BoxView)view).Color = Color.Accent;
                    goto case "Stepper";
                case "Button":
                    ((Button)view).Text = item;
                    goto case "Stepper";
                case "Stepper":
                case "Switch":
                    view.HorizontalOptions = LayoutOptions.Center;
                    break;
            }
            stackLayout.Children.Add(view);
        }
        await Navigation.PushAsync(contentPage);
    }
}

这个Clicked处理程序创建一个ContentPage和一个StackLayout,然后简单地遍历第二个ListView中的字符串,通过使用Assembly类定义的GetType方法找到相应的Type对象。 (注意名为xamarinForms的Assembly对象被定义为一个字段。)对Activator.CreateInstance的调用会创建实际元素,然后可以针对最终布局略微定制。
在代码中创建ContentPage对象并向其添加元素并不新鲜。事实上,标准的Xamarin.Forms项目模板包含一个带有构造函数的App类,该构造函数实例化了ContentPage并为其添加了一个Label,因此您在第2章中介绍了这种技术。但是这种方法很快被放弃了,转而支持从ContentPage派生类的更灵活的技术。派生类更强大,因为派生类可以访问受保护的方法,如OnAppearing和OnDisappearing。
但是,有时候回到基础会很有帮助。

目录
相关文章
|
4月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
95 0
|
6月前
|
小程序 API
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
|
Android开发 索引 iOS开发
第二十四章:页面导航(十七)
像现实生活中的应用程序理想情况下,用户在终止并重新启动应用程序时不应该知道。应用程序体验应该是连续且无缝的。即使程序没有一直运行,一个半月进入的条目从未完成也应该在一周后处于相同的状态。NoteTaker程序允许用户记录由标题和一些文本组成的注释。
545 0
|
JavaScript 前端开发 Android开发
第二十四章:页面导航(十六)
保存和恢复导航堆栈 许多多页面应用程序的页面体系结构比DataTransfer6更复杂,您需要一种通用的方法来保存和恢复整个导航堆栈。此外,您可能希望将导航堆栈的保存与系统方式集成,以保存和恢复每个页面的状态,特别是如果您不使用MVVM。
493 0
|
XML JSON Android开发
第二十四章:页面导航(十五)
保存和恢复页面状态特别是当您开始使用多页面应用程序时,将应用程序的页面视为数据的主要存储库非常有用,而仅仅是作为底层数据的临时可视化和交互式视图。这里的关键词是暂时的。如果您在用户与之交互时保持基础数据是最新的,那么页面可以显示和消失而不必担心。
651 0
|
JavaScript Android开发
第二十四章:页面导航(十四)
切换到ViewModel此时应该很明显,Information类应该真正实现INotifyPropertyChanged。 在DataTransfer5中,Information类已成为InformationViewModel类。
603 0
|
JavaScript Android开发 索引
第二十四章:页面导航(十)
属性和方法调用调用PushAsync或PushModalAsync的页面显然可以直接访问它导航到的类,因此它可以设置属性或调用该页面对象中的方法以将信息传递给它。但是,调用PopAsync或PopModalAsync的页面还有一些工作要做,以确定它返回的页面。
550 0
|
JavaScript Android开发
第二十四章:页面导航(九)
数据传输模式 多页面应用程序中的页面通常需要共享数据,特别是一页面将信息传递到另一页面。 有时此过程类似于函数调用:当HomePage显示项目列表并导航到DetailPage以显示其中一个项目的详细视图时,HomePage必须将该特定项目传递给DetailPage。
630 0
|
Android开发 索引
第二十四章:页面导航(十二)
事件在方法调用方法和消息中心通信方法中,信息页面需要知道主页的类型。 如果可以从不同类型的页面调用相同的信息页面,这有时是不合需要的。这个问题的一个解决方案是info类实现一个事件,这就是DataTransfer3中采用的方法。
507 0