Xamarin.Forms 教學系列文（二.壹）介面架構 & Hello World!

學習目標

• 了解 Xamairn visual elements 
• 執行自己新增的 XAML 檔
• 了解 C# 如何初始化屬性

介面（interface），在各個平台 (ios, android, wp) 有不同的的物件與稱呼，例如 controls, elements, views, widgets，都是為了拿來與使用者互動或是顯示資料。

這些介面 (interface) 的物件在 Xamarin，統稱為 visual elements，最主要有三種類別：

• page
• layout
• 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 來編排畫面上的元件和位置。

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。

安裝 Visual Studio 與建立新專案可以參考此篇教學

http://www.loganedge.tw/2017/01/xamarinforms-visual-studio-2015-android.html

若開啟新專案後成功執行可以看到以下畫面。

接著來更深入探討程式，
在 Hello 專案底下會看到這支程式，App.xaml。

將 App.xaml 階層打開可以看到 App.xaml.cs，改寫成以下程式碼後執行。

        public static App()
        {
            InitializeComponent(); 
            
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,

                    Children = {
                        new Label {
                            HorizontalTextAlignment = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };
        }

這一段程式就能觀察到 Xamarin viewsual element 都是巢狀式的，ContentPage 包著 StackLayout，StackLayout 擁有一個 Label 子項目。

原本教學前期的教學都會先以編寫.cs 為主，直到第七章才會正式教 XAML。
不同的是，本部落格系列教學文一律統一使用 XAML 專案。


Label for text

在同一專案內，右鍵 → 加入 → 新增項目，新增一個 Forms Xaml Page，名為 Greetings。

改寫 Greetings.xaml.cs，如下程式碼，
在 Greetings 內宣告一個 Label 並設定 Text 的值，再指派給 Contnet。

       public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Label label = new Label();
            label.Text = "Greetings, Xamarin.Forms!";
            this.Content = label;
        }

當然不要忘記把 App.xaml.cs 內的 MainPage 指派為 Greentings 類別。

        public App()
        {
            InitializeComponent();

            MainPage = new Greetings();
        }

按下執行後就能看到成果了。


物件初始化

最後要特別講一下在 C# 3.0 之後支援於物件宣告時，同時初始化屬性的值。

所以上面的程式碼可以在 Label 宣告時用大括號改寫如下：

        public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Label label = new Label
            {
                Text = "Greetings, Xamarin.Forms!"
            };

            this.Content = label;
        } 

當然，ContentPage 也能初始化其屬性，再改寫成把 new Label 指派給 Content 屬性。

        public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Content = new Label
            {
                Text = "Greetings, Xamarin.Forms!"
            };
        }

結果如下圖：

這張圖會發現一件事情，Lable 若沒有設定其初始位置，iPhone 的畫面會從最頂端開始，和電源同一排...

這樣頗尷尬的...

Label 的字會和頂端資訊重疊...

當然 Xamarin.Forms 有提供解決方法，將於下一小節介紹給大家。