當麻許的超技八: [Xamarin] Xamarin Form 初體驗

最近在看一下Xamarin 官方的文件看到一個應該不算新發表，但是很有趣的東西就是Xamarin Form

一開始看到這技術有點嚇到，因為之前的Xamarin 他並沒有去解決各平台上面Layout 的問題，所以各個平台都要自己去撰寫UI，但是這東西出現Xamarin 推了一個自己的 XAML 然後一些基本的UI都有了，並且做出來的東西可以做到三平台上面的一致性

(官方的範例圖片)
所以當然我就直接開來玩玩看，當然就簡單寫個Hello World.
1. 打開專案，並且我取名是App2

2.可以在共用的專案(App2)，加入 Form Xaml Page

我取名為Page1.cs，此時候專案多了一個 Page1.xaml ，我測試環境是Windows 10 + Visual Studio 2015 ，目前是無法視覺化編輯XAML
預設是這樣

<?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="App2.Page1">

    <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

不過我們直接來改變一下，加入 StackLayout 跟一個Button ，並且做一些修改

<?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="App2.Page1">

    <StackLayout

               HorizontalOptions="Center"

               VerticalOptions="Center">

        <Label Text="Hello 當麻" VerticalOptions="Center" HorizontalOptions="Center" />

        <Button Text="Click Me!!"  x:Name="btnClick"   VerticalOptions="Center" HorizontalOptions="Center" ></Button>

    </StackLayout>

</ContentPage>

我希望其中按鈕點一下去後，可以跳出一個Hello Xamarin Form 的Dialog

3.因為打開專案預設他會自己生成一個Form 就在 App.cs 的地方有一段 MianPage =…. ，我們把它註解起來，讓他直接變成Page1 是起始頁面

public App ()

    // The root page of your application

    //MainPage = new ContentPage

//{

    //    Content = new StackLayout

    //    {

    //        VerticalOptions = LayoutOptions.Center,

    //        Children = {

    //            new Label {

    //                XAlign = TextAlignment.Center,

    //                Text = "Welcome to Xamarin Forms!"

    //            }

    //        }

    //    }

    //};

    MainPage = new Page1();

4. 我們可以撰寫在Page1.xaml.cs 下面撰寫btnClick 後的事件

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using Xamarin.Forms;

namespace App2

    public partial class Page1 : ContentPage

        public Page1 ()

            InitializeComponent ();

            btnClick.Clicked += BtnClick_Clicked;

        private void BtnClick_Clicked(object sender, EventArgs e)

            DisplayAlert("標題", "Hello, Xamarin Form.", "OK");

結果:

參考文件:
官方介紹 - http://xamarin.com/forms
Xamarin Form - https://developer.xamarin.com/guides/cross-platform/xamarin-forms/
Xamarin From Button - http://developer.xamarin.com/api/type/Xamarin.Forms.Button/
Getting Started - https://developer.xamarin.com/guides/cross-platform/xamarin-forms/getting-started/
User Interface - https://developer.xamarin.com/guides/android/user_interface/
Introduction - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/getting-started/introduction-to-xamarin-forms/

大概玩了一下，發現他還有Data Binding 的部分，其實我很訝異，畢竟這是一個除了PhoneGap 以外另一個創舉，畢竟這樣考慮的東西還很多，目前你問我說我敢不敢拿來做Production 我覺得我還不敢，可能是操作上面我還並未夠成熟，而且現在無法視覺化編輯是一個小小的遺憾，但是我深深覺得Xamarin 團隊真的很強悍，或許在下個版本可以解決這個問題，我是給予高度肯定的態度，目前支援的UI Control 還是有限的，但是整個布局跟相容性來說，我對這團隊有信心，如果你對於跨平台真的有這需求，真的可以考慮Xamarin Form。

2015-08-27

[Xamarin] Xamarin Form 初體驗