Xamarin.Forms Page介绍

Forms中的Page表示App中的一个页面。作用类似Android中的Activity,用来呈现一个用户界面,通常不会直接使用Page类,更多是使用Page的子类,最常用的就是ContentPage.

Forms 中不同Page的表现形式

继承关系图


ContentPage介绍

Page的一个子类,只可以显示一个View(only one child),通常会将一个继承了Layout或Layout<T>的子类作为ContentPage的子视图,如:StackLayout。新建项目中默认使用的就是ContentPage(ContentPage作为XAML文件的根结点)。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:page" x:Class="page.pagePage">
    <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

如何指定App显示的哪个Page?找到App.xaml文件,打开关联的App.xaml.cs文件,看到在App的构造方法中通过MainPage=new pagePage();指定要显示的Page,pagePage是我们布局文件对应的类名。

通过CS代码的方式定义Page并显示屏幕上:

MainPage = new ContentPage()
{
    Content = new Label()
    {
        Text = "Welcome to Xamarin Forms!",
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    }
};

与默认提供的XAML布局样式相同。


MasterDetailPage 使用介绍

MasterDetailPage管理两个页面,Master显示一个数据列表,Detail显示某一项详情。MasterDetailPage定义了两个Page类型属性Master和Detail,通常我们会将这两个属性赋值为ContentPage对象,但是目前为止,要使MasterDetailPage在Universal Windows Platform能正常使用,必须将Detail属性赋值为NavigationPage类型。MasterDetailPage会根据设备有(phone 或 tablet)不同的显示方式,显示方式由MasterBehavior属性决定,手机默认为Popover模式,平板或桌面设备默认为Split模式。

同时提供两个bool类型属性IsGestureEnabledIsPresented,IsGestureEnabled表示是否支持滑动切换MasterPage的显示状态,而IsPresented表示MasterPage是否为显示状态。当IsPresented值改变时会触发IsPresentedChanged事件。

编写示例项目,新建三个Page页面,分别命名为MasterPage和DetailPage1、DetailPage2。MasterPage的CS文件中增加如下代码:

public partial class MasterPage : ContentPage
{

    public ListView ListView { get { return menuListView; } }

    public MasterPage()
    {
        InitializeComponent();
        menuListView.ItemsSource = new List<ListViewItem>() {
            new ListViewItem(){
                Title="Detail 1",
                TargetPage=typeof(DetailPage1)
            },
            new ListViewItem(){
                Title="Detail 2",
                TargetPage=typeof(DetailPage2)
            }
        };
    }

}

public class ListViewItem
{
    public string Title { get; set; }

    public Type TargetPage { get; set; }
}

定义了一个Model类ListViewItem。MasterPage中除了设置ListView的ItemSource属性外还定义了一个只读属性ListView,方便在MasterDetailPage中访问。

MasterPage XAML文件定义

DetailPage1、DetailPage2分别只包含了一个Label显示文本以区分Page。

修改创建项创建的Page文件。

XAML文件修改

修改根节点为MasterDetailPage,IsGestureEnabled和MasterBehavior默认值即刻,定义MasterDetailPage.Master和MasterDetailPage.Detail属性节点,根据需要定义Name属性。需要注意Detail属性赋值了一个NavigationPage实例。

CS文件继承的子类修改为MasterDetailPage,构造函数中增加如下代码:

masterPage.ListView.ItemSelected += (sender, e) =>
{
    if (e.SelectedItem == null)
    {
        return;
    }
    var item = e.SelectedItem as ListViewItem;
    Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetPage));
    masterPage.ListView.SelectedItem = null;
    IsPresented = false;
};

Activator.CreateInstance方法用来创建指定类型的实例,更多介绍:http://www.cnblogs.com/lmfeng/archive/2012/01/30/2331666.html

设置SelectedItem = null取消ListView的选中效果,IsPresented = false修改MasterPage的显示状态。

运行效果:

如果DetailPage中仅是数据的变化,可以直接在MasterDetailPage.Master和MasterDetailPage.Detail属性节点中定义Page。

<MasterDetailPage.Master>
    <ContentPage>
            <!--页面定义-->
    </ContentPage>
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <ContentPage>
                 <!--页面定义-->
            </ContentPage>
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

tablet设备修改MasterBehavior属性为Split。会有不同效果:



MasterBehavior值为Split时,不允许设置IsPresented的值为false。

TabbedPage 使用介绍

TabbedPage继承抽象类MultiPage<Page>,管理一个Page类集合,每次只有一个Page显示,在TabbedPage的顶部(Android、WP)或底部(iOS)显示一个页卡标签标示每一个Page页面。MultiPage<T>是一个抽象类,定义了TabbedPage的大多属性和事件。

iOS中使用TabbedPage必须为每个标签提供一个图标,由对应页面的Icon属性设置,否则App Store不会通过审核。

TabbedPage从MultiPage<Page>继承一个IList<T>类型属性Children,表示TabbedPage标签页管理Page的集合。MultiPage<Page>还提供了ItemSource和ItemTemplate两个属性定义标签页的Page集合。

MultiPage<Page>定义了两个属性方便应用程序判断用户当前查看哪个页面:CurrentPage和SelectedItem。CurrentPage获取或设置当前显示的页面,SelectedItem表示ItemsSource当前的选中项。

MultiPage<T>定义两个事件:PagesChanged和CurrentPageChanged。当ItemsSource属性改变时会触发PagesChanged事件,CurrentPage改变时触发CurrentPageChanged事件。

修改主页面XAML文件,根节点改为TabbedPage,同时修改继承子类为TabbedPage。

Children属性使用

定义Children Page页面Tab1,Title属性赋值外,iOS平台还要对Icon属性赋值:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="pages.Tab1" Title="Tab1">
    <ContentPage.Icon>
        <OnPlatform x:TypeArguments="FileImageSource" iOS="ico.png"/>
    </ContentPage.Icon>
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0"/>
    </ContentPage.Padding>
    <ContentPage.Content>
        <Label Text="Tab1"/>
    </ContentPage.Content>
</ContentPage>

类似方式定义Tab2和Tab3。
TabbedPage页面XAML文件修改

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:local="clr-namespace:pages" 
        x:Class="pages.pagesPage">

    <local:Tab1/>
    <local:Tab2/>
    <local:Tab3/>
    
</TabbedPage>

对应C#代码:

ItemSource和ItemTemplate使用

有ItemTemplate定义所以该方式用于多个TabPage页面想同时使用,结合Data Binding管理页面数据显示。

如下方式修改TabbedPage页面代码:

定义TabPageMode,初始化TabPageMode集合赋值给ItemsSource属性。新建Tab页面,根据Tab初始化DataTemplate实例赋值ItemTemplate属性。

定义Tab页:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="pages.Tab" Title="{Binding Title}" Icon="{Binding Icon}">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0"/>
    </ContentPage.Padding>
    <ContentPage.Content>
        <Label Text="{Binding Content}"/>
    </ContentPage.Content>
</ContentPage>

也可以省略Tab页面定义,TabbedPage的XAML中直接定义TabbedPage.ItemTemplate属性节点:

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:local="clr-namespace:pages" 
        x:Class="pages.pagesPage">

    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Title}" Icon="{Binding Icon}">
                <ContentPage.Padding>
                    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0"/>
                </ContentPage.Padding>
                <ContentPage.Content>
                    <Label Text="{Binding Content}"/>
                </ContentPage.Content>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
    
</TabbedPage>

效果图:

Icon属性只对iOS有效,Android和Windows Phone只是简单的显示文本标签。

NavigationPage 使用介绍

在Navigation中介绍

CarouselPage 介绍

CarouselPage支持用户滑动手势的页面,类似gallery。推荐用CarouselView代替CarouselPage。
CarouselView实现轮播图效果:https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容