[Xamarin] Xamarin Form 初體驗

2015-08-27

最近在看一下Xamarin 官方的文件看到一個應該不算新發表,但是很有趣的東西 就是Xamarin Form
Image 096
一開始看到這技術有點嚇到,因為之前的Xamarin 他並沒有去解決各平台上面Layout 的問題,所以各個平台都要自己去撰寫UI,但是這東西出現Xamarin 推了一個自己的 XAML 然後一些基本的UI都有了,並且做出來的東西可以做到三平台上面的一致性
image05 
(官方的範例圖片)
所以當然我就直接開來玩玩看,當然就簡單寫個Hello World.
1. 打開專案,並且我取名是App2
Image 098
2.可以在共用的專案(App2),加入 Form Xaml Page
Image 099
我取名為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");
        }
    }
}

結果:
Screenshot_2015-08-27-15-04-22Screenshot_2015-08-27-15-04-25
參考文件:
官方介紹 - 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。


當麻許的超技八 2014 | Donma Hsu Design.