02 UI架构和Hello World

作者: 归零者 分类: Xamarin.forms基础 发布时间: 2017-09-05 15:21


介面(interface),在各个平台 (ios, android, wp) 有不同的称呼,例如 controls, elements, views, widgets,都是为了用来与使用者交互或是显示信息。

这些介面 (interface) 的物件在 Xamarin,统称为 visual elements,最主要有三大类:

  1. page
  2. layout
  3. view



page

page 是占满手机画面的 visual elements,一个 App 內可以包含一个或多个 page,page 的种类也很多种。

而在此教程中,你只会看到一种:ContentPage。

其它种类 page 有兴趣可以到官方网站看看。

https://developer.xamarin.com/guides/xamarin-forms/controls/Pages/


Layout

在 Xamarin,都是使用巢状(parent-child)架构来编写 visual elements。
所以能在 ContentPage 增加许多子项目,通常会放置 Layout 來编写UI上的元件和位置。
Layout 內也可以巢状放置其他 Layout 或是 View 元件。
同样的,Layout 有许多种类,可以在官网看看。

https://developer.xamarin.com/guides/xamarin-forms/controls/layouts/


View

View 在 Xamarin.Forms 代表的是交互或是展示信息的物件,例如 text, bitmaps, buttons, text-entry, sliders, switches, progress bars, date 和 time pickers 等,在这篇教程会先带你使用 Label !
https://developer.xamarin.com/guides/xamarin-forms/controls/views/


Hello World !

首先启动 Visual Studio 并建立一个新的 Xamarin.Forms解决方案,名称叫做 Hello。

若成功运行后可以看到以下画面。


在 Hello 项目底下会看到,App.xaml。

将 App.xaml 展开可以看到 App.xaml.cs,改成如下代码并执行。

  1. public static App()
  2. {
  3. InitializeComponent();
  4. // The root page of your application
  5. MainPage = new ContentPage
  6. {
  7. Content = new StackLayout
  8. {
  9. VerticalOptions = LayoutOptions.Center,
  10. Children = {
  11. new Label {
  12. HorizontalTextAlignment = TextAlignment.Center,
  13. Text = “Welcome to Xamarin Forms!”
  14. }
  15. }
  16. }
  17. };
  18. }

这一段程序可以观察到 Xamarin viewsual element 都是巢状的,ContentPage 包裹 StackLayout,StackLayout拥有一个 Label 子项。
前期的教学都会先以编写.cs 为主,直到第七章才会正式教 XAML。

Label for text

在同一项目內,右键 → 加入 → 新增项目,新增一個 Forms Xaml Page,名为 Greetings。


改为 Greetings.xaml.cs,如下代码,
在 Greetings 声明一个 Label 并设置 Text 的值,再指派給 Contnet。

  1. public Greetings()
  2. {
  3. //初始化 XAML
  4. InitializeComponent();
  5. Label label = new Label();
  6. label.Text = “Greetings, Xamarin.Forms!”;
  7. this.Content = label;
  8. }

当然不要忘记把 App.xaml.cs 內的 MainPage 指派为 Greentings 类。

  1. public App()
  2. {
  3. InitializeComponent();
  4. MainPage = new Greetings();
  5. }

按下运行后就能看到成果了。

物件初始化

最后要特別讲一下在 C# 3.0 之后控件声明时候,可以同时初始化控件的值。
所以上面的代码可以在 Label 声明时候用大括号改为:

  1. public Greetings()
  2. {
  3. //初始化 XAML
  4. InitializeComponent();
  5. Label label = new Label
  6. {
  7. Text = “Greetings, Xamarin.Forms!”
  8. };
  9. this.Content = label;
  10. }

当然,ContentPage 也能初始化其属性,再改写为把 new Label 指派给 Content 属性。

  1. public Greetings()
  2. {
  3. //初始化 XAML
  4. InitializeComponent();
  5. Content = new Label
  6. {
  7. Text = “Greetings, Xamarin.Forms!”
  8. };
  9. }


结果如下图:


这几张图会发现一件事情,Lable 若沒有设定其初始位置,iPhone 的画面会从最顶端开始,和电池同一排…

这就尴尬了…

Label 的字会与顶端重叠


当然 Xamarin.Forms 有提供解決方法,将在下一节介绍给大家。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

说点什么

avatar
  Subscribe  
提醒
跳至工具栏