Xamarin多种页面布局Page

关键词:

    Xamarin程序员可以根据自己的喜好选择C#纯代码方式或者XAML方式通过Xamarin.Forms对移动平台UI进行定义。

 使用VS点击添加新建项,可以添加UI页面布局,如下图所示:


 Xamarin.Forms 对移动平台中常用页面作出了一下归纳 ,主要为5类:

   

         1. ContentPage 就是最简单的展示页面,通过ContentPage 你可以对展示的控件进行简单布局,这里就涉及到StackLayout(布局方式)和ScrollView(滚动视图)。

       这是官网上对ContentPage 在不同平台展现的简单图示。我们来看看ContentPage 是如何运作的。ContentPage 属性里有一个公共属性Content , 从名字上不难看出这是一个对ContentPage展示内容的属性。假设我们需要定义一个简单页面 , 你可以创建一个继承自ContentPage的类。

        2. MasterDetailPage 用于这种场景最好不过了,阅读新闻时,一开始只有一个标题,当点击标题后才会有详细部分。

       对于MasterDetailPage 需要注意由于用户点击Master部分后,会展示Detail 的页面。 因此MasterDetailPage需要对Master ,和Detail两部分属性进行定义。

       通常Master部分大家都会是一个Label的标题和一个ListView结合,所以在定义Master前需要准备好这两个简单的控件组合。还有由于Master选中项,影响Detail的展示内容所以必须在ListView的选中事件进行一些对Detail内容的设定。如一下代码:

意,Xamarin.Forms 统一了UI 的实现方式,但每个平台在操作上还是或多或少有不同的操作限定。例如MasterDetail在Android/iOS上的操作是通过Detais部分滑动显示或隐藏Master部分,而Windows Phone上是通过在Detal上使用tap操作去显示隐藏Master部分,所以这里需要重新对界面的部分进行代码适配。

       3.  NavigationPage 跳转导航。相信每一个平台都不可缺少。这里可以结合ContentPage去完成

        关键点在于通过Navigation.PushAsync的异步事件触发跳转。还有如果你是通过contentPage里面的控件进行跳转,一定要把它封装到NavigationPage当中,否则程序是会报错的。

     4. TabbedPage 便签页,这是三个平台入面显示出来效果差别最大的一种展示。iOS的Tab在下方,Android的在上方 ,Windows Phone的是Pivot.我这里真心觉得Xamarin的团队很赞,毕竟统一界面构造方式不是一件容易的事情能做到这个地步真的不错。

        TabbedPage有几个属性是常用的ItemsSource是定义多少个Tabbed, ItemTemplate是对每个TabbedPage显示的页面进行定义。

       5. CarouselPage当你用手指滑动页面时自动切换,这个有点而像相册或者新闻阅读可以通过划动手势切换上一页/下一页。

    Xamarin.Forms 把移动平台中常用的页面展示做成了五个通用类给日常的使用。当然你可以在这个基础上定制灵活定制你的控件,从而提高生产效率。我还是那句Xamarin.Forms不是万能,但是已经足够用了。

作者:songshizhao 发表于:2017-05-13T10:02:06 访问量:1418
评论 [发表评论]