如何在 Visual Studio 2017 開啟 Xamarin.fomrs Live Player

這幾天釋出 15.4 更新檔，最重要的應該是 Live Player 的啟用

但更新完要自行手動開啟

Xamarin.Forms 常用工具與資源

Xamarin.Forms 在 OpenSource 強大威力引導下，更新速度比以前的鎖國微軟快上了好幾倍...

當然各種資源也是不斷的推陳出新...

找資料時發現了一篇整理了 Xamarin.Forms 會用到的資源與工具，

翻譯起來相信對台灣開發 App 的同學能有很大的幫助...

用對的開發工具，能省去許多開發的時間 !

Xamarin.Forms 教學系列文（二十五.貳）Tabbed Page

學習目標

• TabbedPage 多頁面切換
• Tabbed 也有 ItemSource 可以用喔!!

這也是常見的一種頁面，凡舉各種 App 都適用... 隨便一抓 Instagram 就是用 TabbedPage 為主的 App...

當你想要 App 的頁面能左滑右滑時，就該來使用 TabbedPage，

使用時要注意的就是內容要放的東西，等等範例可以看到，我們會建立起三個 ContentPage 並放入 TabbedPage 內，
除了直接放 ContentPage，我們還能將集合指派給 TabbedPage 的 ItemSource。

TabbedPage 的標題隨著內容頁 Title 屬性值而改變。

對了，iOS 的 Tab 在下方，且每個 Tab 一定要有 icon，否則無法上架 App store。

Xamarin.Forms 教學系列文（二十五.壹）Master Detail Page

學習目標

• MasterDetailPage 左上角海苔條

建構 Xamarin.Forms App 時，可以想像你在蓋一棟大樓，

Visual Element 是大樓內的元件，
Layout 則是一面牆壁或是畫布，可以隨意放置任何的 Visual Element，

而 Page 就是房間，能容納各種 Layout，

上一章節學會的 Navigation，就是將每個房間鏈結起來的通道。

一路學來其實已經看過兩種 Page，一為常見的 ContentPage，二為上一章節的 NavigationPage

本章要來介紹兩個新的 Page，MasterDetailPage 和 TabbedPage

先來看 MasterDetailPage

Xamarin.Forms 教學系列文（二十四.貳 - 3）Navigation 參數傳遞 - Messaging center & ViewModel

學習目標

• Messaging center 應用程式內部推播
• ViewModel ... 不熟的請回去看 18章

這一小節提到的兩個都是較特別的方法，

例如 ViewModel，我認為不太算正統的參數傳遞，而是一種利用 MVVM 達到我們目的的方法。

而 Messaging center 有點像是 App 內部推播，利用接收者(Subscribe) 與發送者(Send) 的關係來傳遞參數，其用法也相當特別~

Xamarin.Forms 教學系列文（二十四.貳 - 2）Navigation 參數傳遞 - App & Events

學習目標

• App 全域型變數
• 委派 Event 變數 

為什麼我會稱這兩個為中介型參數傳遞呢?

因為這兩個方法都要依靠另一個類別內的變數，才有辦法達到 參數傳遞 這個目的。

第一種方法會先在 App 內設定好要使用的全域變數，

那第二種則是先在另一個頁面內設好要委派的事件 (Event) 變數。

先來看 App 的用法~ 相當簡單的

Xamarin.Forms 教學系列文（二十四.貳 - 1）Navigation 參數傳遞 - 建構子 & 方法呼叫

學習目標

• 建構子參數傳遞
• 呼叫上下頁方法

當我學會了頁面導覽後，心中還是充滿了疑問，若我兩個頁面之間要做參數的傳遞，到底要怎麼做?

App 又不像網頁的 Post、Get，甚至還用個 Session 來當作參數傳遞!!!

那這一小節會提到 六種 參數傳遞的方式，各有優缺點，我會分成三個部分來說。

1. 直觀型傳遞 - 建構子 & 呼叫方法
2. 中介型傳遞 - App & Events
3. 特殊型傳遞 - Messaging Center & ViewModel

第一部分會先來談談最簡單的方式，利用建構子去傳遞參數，或是呼叫上下頁的方法

Xamarin.Forms 教學系列文（二十四.壹）Page Navigation - 頁面導覽

學習目標

• Navigation 頁面導覽
• 導覽的頁面類型 Modaless & ModalPage
• Navigation 的一些屬性

頁面導覽 在資訊界其實很常見，例如你正在看這篇教學所使用的瀏覽器，那左上角的上一頁，就是一種頁面導覽。

如果讓我們以程式的觀點來看待 頁面導覽 ，其實就是 實作堆疊(Stack)，

當有新頁面出現時，就將此頁面 Push 進 Stack 並顯示他，

當要回到前一頁時，就 Pop 掉 Stack 第一筆，並顯示最上面一筆的頁面，

而這也是 Xamarin.Forms 實作 Navigation 的方法，
所以會看到 Navigation 類別提供了 Push 和 Pop 的方法，甚至可以手動取得 Navigation Stack 來做進一步處理。

導覽架構內一定有初始頁，我們通常稱作 Main page、Home page 或是 Start page。

而從 Main page 準備導覽時，下一頁的類型我們有兩種可以選擇：

• Modeless page (有返回鈕) - 其實也就是正常的導覽頁面
• Modal page (無返回鈕)

我們會從 Navigation 類別所提供的方法來做介紹，並用範例讓大家了解這兩種頁面類型的差異。 

Xamarin.Forms Change Navigation Bar Font Family & Size - Android

由於目前 Xamarin.Forms 沒有屬性可以設定，Navigation Bar 的字體或大小，

那... App 的設計畫面就是會覺得醜醜的...

這問題其實困擾一陣子了...剛好心血來潮再翻一下資料，終於弄出來，

但目前只有 Android 版本就是了...

作法一樣從 CustomRender 下手，並在各平台專案內實作，有人有找到更好的方法請告訴我...

Xamarin.Forms 教學系列文（二十三.參）Behaviors - Visual Element 手動附加功能

學習目標

• Behavior- 元件的自定義附加行為
• 在 Behavior 內加入 Bindable Property

Trigger 和 Behavior 其實滿像的，所有 Trigger 可以做的事情都能用 Behavior 完成，

但，Behavior 要寫的程式碼比 Trigger 多，

所以，能用 Trigger 解決的問題就不要用 Behavior !!!

Behavior 就像是 Trigger 的加強版，當然也可以在 XAML 重複使用。

等等，所以 Behavior 到底是什麼??

可以想成：

幫 Visual Element 手動附加新功能。

來看一下範例，
當 Entry 輸入非數字時，文字會變成紅色，

本範例就是附加 判斷是否為數字  的新功能

Xamarin.Forms 教學系列文（二十三.貳）XAML 觸發程式 - DataTrigger & MultiTrigger

學習目標

• DataTrigger - Binding 資料觸發
• MultiTrigger - 多條件式 Trigger
• MltiTrigger 利用 隱藏Switch 做中介轉換 

上一小節已經學會，針對 特定屬性 或 特定事件 更改時去觸發 Trigger 。

DataTrigger 的寫法其實跟 Trigger 很像，只是差在將 Property 改成 Binding

DataTrigger 的功能為

偵測到 databiding 物件 的值是否更改，再決定觸發 Trigger 動作。

而 databinding 可以搭配 MVVM 或是其他 Visual Element 物件。

Xamarin.Forms 教學系列文（二十三.壹）XAML 觸發程式 - Trigger & EeventTrigger

學習目標

• Trigger - 屬性觸發
• EeventTrigger - 事件觸發

當初在 第七章 介紹 XAML 時，XAML 似乎就僅是個建構使用者介面的標籤語法而已，

但到了二十三章，Xamairn 想讓 XAML 做更多 後端能做 的事情，

Triggers 和 Behaviors 就這樣誕生了

Triggers 可以在屬性條件成立時，同時更改其他的屬性值。
Behaviors 則是更開放性的用法，在 Visual Element 內加入更多客製化的功能。

不論是 Triggers 或是 Behavior，都可以寫在 Style 內，讓程式 重複使用。

Xamarin.Forms 教學系列文（二十二）Animation - 物件動畫

學習目標

• Animation - RotateTo, ScaleTo, Translateto, FadeTo, LayoutTo
• 第二次點擊失效原因與解法
• Easing Function - 動畫曲線

Xamarin.Forms 對物件的形狀位置變化，除了像上一章節手動更改物件的屬性，來放大縮小移動位置。

同時也提供了一些簡易的 動畫方法，如漸漸消失，移動到某處，變大，旋轉..

動畫方法目前不支援寫在 XAML，全部都要用 C#

直接看一支簡單的範例：

Xamarin.Forms LineSpacingLabel - 可調整行距的 Label

剛好有人問，稍微研究一下及做個整理

問題就是：
如何增加 Label 內的文字行距 ( Xamarin.Forms 並沒有提供這屬性啊 ...

但仔細一看，其實 Android 和 iOS 都有提供行距的屬性可以設定... (看來只是 Xamarin.Forms 不想提供給我們用啊...

所以，目前的做法就是自行 客製化 一個附有 行距屬性 的 Label  (客製化教學在後面的章節...

讓我們姑且叫他 LineSpacingLabel 吧。

Xamarin.Forms 教學系列文（二十一）Transforms - 位移 & 放大縮小 & 旋轉

學習目標

• Translation - 位移
• Scale - 放大縮小
• Anchoring - 放大縮小錨定點
• Rotation - 旋轉

颱風天什麼的在家看原文書打教學最棒了...

顧名思義的，這章節要來介紹 Xamarin.Forms 提供的三種物件變形方式

這三種變形跟以下八個屬性有點關係，型態都是 double：

• TranslationX
• TranslationY
• Scale
• Rotation
• RotationX
• RotationY
• AnchorX
• AnchorY

先來介紹 Translation - 位移

Xamarin.Forms 教學系列文（二十.貳）File I/O

學習目標

• PCL 實作 FileHelper
• 檔案的寫入，讀取，刪除

自古以來，檔案存取 是程式最基本的功能，

不過手機取得檔案的方式和桌機有些不一樣，
在桌機上，使用者有權限去存取整個硬碟或瀏覽整個目錄，
在手機上，有幾個基本的資料夾專門拿來放圖片或音樂，甚至應用程式要存取的資料會放在 特定的資料夾 內。

有寫過 .NET 的程式人員一定會知道 System.IO 類別庫，支援檔案的輸入輸出，
其中最好用的就是 File 這個類別，
例如，
要寫入文字時可以直接使用 File.WriteAllText 方法，
或是讀取檔案時可以使用 File.ReadAllText 方法。

為了防止檔案存取去影響到 UI Thread，建議撰寫時都加上 非同步，教學見上一小節。

Xamarin.Forms 教學系列文（二十.壹）async/await 非同步 & DisplayAlert

學習目標

• 學會非同步寫法... 

圖形使用者介面 (GUI) 有一個特質，執行事件時都是 有順序性 的，每一件事情執行前都要等待另一件事情結束。

一開始，所有程式都會連結到一條執行緒內動作，這條執行緒也稱做 main thread、user-interface thread 或 UI thread

但若 main thread 因為某個大量工作事件卡住，導致介面呈現 假當機 狀態，會讓使用者森氣氣的…

Xamarin.Forms 教學系列文（十九.參 - 2）TableView - TableSection 隱藏 & Menu

學習目標

• 整段 Section 隱藏和顯示的方法 
• Table 也可以當作 Menu 使用!

接續前一小節，我們有個簡單的功能還未完成，
就是開啟 Programmer switch 開關時，才能去點選 Language 和 Platform 這兩個屬性，反之則不能點選。

要完成這個功能，我們要藉由 TableView 本身能放置多組的 TableSection 的特性，並直接隱藏或顯示整組 TableSection

然而...隱藏 TableSection 這件事 無法用 XAML 處理，需借助 C# 才能完成...


接續上一小節的範例，
但我們將 Language 和 Platform 這兩個 PickerCell，移放到一個新的 TableSection 內：

Xamarin.Forms 教學系列文（十九.參 - 1）TableView

學習目標

• TableView 的屬性和寫法
• 客製化 Cell

此章介紹 Xamarin.Forms 最後一個 Collection Views - TableView

TableView 通常拿來顯示 不同類型 的項目，而項目就是類別下的各屬性。
換個方式說，每個項目就是由屬性所呈現出來的 Cell

TableView 僅有四個屬性：

• Intent - type of TableIntent
• Root - type of TableRoot
• RowHeight - type of int
• HasUnevenRows - type of bool

Intent 屬性可以設定為 (也可不設定) 底下四個值，表示此 TableView 的用途是什麼：

• Data - 用於顯示資料時
• Form - 用於需要輸入資料時
• Settings - 與 Form 很像，但通常會有預設值
• Menu - 通常用於點選項目來觸發動作

Root 屬性對應的 XAML 為 TableRoot，底下會包一個或多個 TableSection，而 TableSection 底下會包一個或多個 Cell：

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
                   <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

但其實啊... TableView 與一個 用 ScrollView 包起來的 StackLayout，兩者之間沒有太大的差異，StackLayout 內也可以放置被綁定的 Visual Element。

不過，TableView 在規劃和安排要顯示的資訊或表單時，會更加的方便。

來看一個 Form 型態的 TableView：

Xamarin.Forms 教學系列文（十九.貳 - 4）ListView - 長按選單 (Context Menu) & 資料刷新

學習目標

• Context Menu - 長按或滑動出現的選單
• IsPullToRefresh - 向下滑動時刷新資料

終於來到 ListView 最終章... 本章節將補完 ListVeiw 兩個常用的功能，一個是長按選單，另一個是下滑刷新資料。

Xamarin.Forms 教學系列文（十九.貳 - 3）ListView - Interactivity & MVVM

學習目標

• ListView 在 MVVM 的實際使用

與 ListView 的互動方式有好幾種~

如果用戶點擊一個項目，ListView 會觸發一個 ItemTapped 事件，如果該項目以前沒有被選擇，也會是 ItemSelected 事件，還能針對 SelectedItem 屬性做 data binding。

ListView 還有一個 ScrollTo 方法，它允許程式捲動到 ListView 指定的項目。

互動的範例可於原文書 p.571 看，本章節重點放在 MVVM 的範例~
本章程式相當長... 請耐心服用...

Xamarin.Forms 教學系列文（十九.貳 - 2）ListView - Template & Grouping

學習目標

• Template - 自訂顯示資料格式
• Grouping - 資料群組化顯示

本章節的程式都會用到一支稱作 NamedColor 的類別當作資料來源，NamedColor.All可以撈出 147 種顏色，程式碼附在文章最後。

本章節主要在介紹 ListView 如何顯示資料~

ListView 定義了一個 ItemTemplate 屬性 (DataTemplate 類別)，而 DataTemplate 使用 Cell 來協助項目的呈現

ListView 內建好幾組 Cell 可以使用：
Object
     BindableObject
        Element
            Cell
                TextCell — 單純顯示文字，可加入第二行備註行
                ImageCell — 繼承自 TextCell，可加入圖檔
                EntryCell — 可放置 Entry
                SwitchCell — 可放置  Switch
                ViewCell — 客製化呈現方式


Cell 不只在 ListView 會用到，在稍等的章節 TableView 也會出現，只是用法不太一樣
在 ListView 內最常用到的應該是 TextCell、ImageCell 和 ViewCell 

先來看 TextCell~

Xamarin.Forms 教學系列文（十九.貳 - 1）ListView - ItemSelected & ObservableCollection

學習目標

• ListView 的 ItemSource - 賦予資料的屬性
• data binding with SelecctedItem
• ObservableCollection - 會發出更動通知的資料集

ListView 應該是 Xamarin.Forms 最重要的物件之一，如果有寫過 Webform，等級大概跟 GridView 差不多...

ListView 是一個顯示 相同類型資料集  的物件，

其中最重要的屬性就是 ItemsSource (type of IEnumerable )，一個可以讓我們指派資料集的屬性，有了這個屬性我們才能隨心所欲地讓 List 顯示資料。

ListView 還有支援 單一項目 選擇，會將點選的項目設為 SelectedItem (type of object)，SelectedIem 初始值為 null。

點選項目時會觸發 ItemTapped 和 ItemSelected 兩個 事件，點擊同樣的項目只會再次觸發 ItemTapped
只有 SelectedItem 屬性更改時，才會觸發 ItemSelected 事件。

Xamarin.Forms 教學系列文（十九.壹）Collection Views - Introduction & Picker

學習目標

• 知道一下 Collection Views 是什麼
• 三個 View 的差異
• Picker 嘿嘿嘿

本章節要探討的是 Collection type 對應的 Collection View。

在資訊界，各類型的集合是不可缺少的，所有高階語言都支援陣列 (Arrays) 和結構 (Structure)，
這兩個集合互相補足 - 陣列通常是相同類型的資料集，結構則是相關但不同類型的資料集。

為了擴充這些基本集合，.NET 添加了幾個有用的類別：

• IEnumerable - 允許在資料集中尋覽
• ICollection - 繼承自 IEnumerable，並增加計數的功能
• IList - 繼承自 ICollection，支援索引 (Indexing)、 新增 (adding) 和移除 (removing)

回到本章節重點 -

Xamarin.Forms 定義了三種跟資料集合有關的 View：

• Picker - 可讓使用者 選擇一個子項目，集合項目一般不超過 12 個
• ListView - 通常有 很多很多 子項目，資料列的呈現通常為 同樣的格式
• TableView - 通常為各種類型 Cell 的集合，用於顯示數據或管理用戶輸入，像是 各類型的表單 或 應用程式設定

Xamarin.Forms 教學系列文（十八.貳 - 1）MVVM - ViewModel LifeCycle

接續上一小節的計算機，

遇到的問題：
當手機應用程式突然關閉 (例如突然有人打電話來)，再重新打開應用程式時，剛剛用計算機算到一半的值還會在嗎??

真相是... 那值被電話 Gank 一下就不見了...

簡單來說：
當 App 被中斷後重啟，希望看到 ViewModel 的值，是中斷前操作的結果吧!!

這邊將配合 第六章 講到的 Application.Current.Properties，來實作 ViewModel 復活大法。

Xamarin.Forms 教學系列文（十八.貳） MVVM - Command，當按鈕也要執行 ViewModel 的 Function

學習目標

• Visual Element 與 Command 的綁定
• CanExecute - 控制 Command 能否執行

Data binding 很強很好用，能幫我們把 ViewModel 的屬性和 View 的屬性連結起來，不用寫半行 事件控制 。

但，(萬惡的 But)

不是所有東西都是屬性啊... 有時候 ViewModel 的屬性要更改，還是得由事件來觸發。

問題來了*
當 Button 點擊時，同時要去更改 ViewModel 的屬性，該怎麼做?

回頭寫 Clicked 嗎?? 錯!!

ViewModel 提供了一個接口，叫做 Command Interface

簡單的說：

Button 可以綁定 ViewModel 內的方法，點擊時順便去更改 ViewModel 的屬性，再經由 INPC 去通知 View 做更動。

Xamarin.Forms 教學系列文（十八.壹 - 1） MVVM - INPC 縮寫

接續上一小節，單純想獨立出來以方便資料查找與引用~

前一小節的兩支範例可以發現兩個問題：

• OnPropertyChanged 使用 弱型別 當作參數 (程式常常死在這種地方，打錯一個字，幹)
• set 有太多重複的程式碼，每次都要寫判斷值是否相同這件事

Xamarin.Forms 教學系列文（十八.壹） MVVM - 事件自動化 (這章很重要啊各位大哥)

學習目標

• MVVM 架構
• ViewModel 建立
• INPC 縮寫 (極度重要，在下一小節)

太久沒發文居然被朋友說富監... 
讀這章前請先拜讀 16 章 Data Binding，至少要懂這兩個概念

1.  Source → Target
2.  Binding 的寫法

MVVM 是一種程式架構，從我們較耳熟能詳的 MVC 架構演化而來，讓這個架構更適合 Xamarin 或 手機開發 使用，最大的好處是降低維護成本。

其目的為：

程式不用自行處理事件控制以及前端物件的資料變化。

為了達到這個目的：

需要建立 Model 和 View 的溝通橋樑，亦即 ViewModel，擁有主動通知前端的功能

白話文就是：

當後端資料更改時 (編輯或新增)，前端顯示資料也會自動跟著改

雖然不寫 MVVM，只用事件驅動 App還是能動，不過一旦學會能夠省下許多維護的成本，有多個 VisualElement 資料來源是同一個時，好用到炸裂。

Xamarin.Forms 教學系列文（十七） Grid - 強大卻簡單的畫面排版工具

學習目標

• 列和欄的配置方式有三種
• 物件指定於 Grid 的位置
• portrait & landscape 轉換的應用

開發 App 有先做 UI 設計的話，本章節必讀，因為要排版排版再排版!!!

在排版上，Grid 是一個相當強力的物件，他有點像是 Html 的 Table

但 Grid 很單純的只用在畫面排版，並不像 Html 的 Table 有相當多屬性可以設定 (ex. border)。

Grid 兩個最重要的屬性，Row 和 Column，可以依照比例分配寬度，來決定畫面物件的位置，而 Row 和 Column 中間放物件的地方叫 Cell。

Grid 二維的特性也相當適用於 portrait 和 landscape 的轉換配置，在本節最後會有範例程式。

本章著重於會用 Grid 就好，將跳過原文書很多內容

本節只講解 XAML 的用法

Xamarin.Forms 教學系列文（十六.貳） BindingMode & StringFormat & BindingConverter

學習目標

• BindingMode 三種綁定方向
• StringFormat 資料顯示的格式
• BindingConverter 客製化資料轉換工具

這篇篇幅會較長一點，主要是延續上一小節 DataBinding，需要學習的周邊知識。

The Binding Mode

正常來說若有一個 Label 的字體大小要隨著 Slider 更改，綁定會像這樣寫：

<Label FontSize="{Binding Source={x:Reference slider}, Path=Value}" />
<Slider x:Name="slider" Maximum="100" />

但我們將 Target 和 Source 反過來綁定看看：

<Label x:Name="label" /> 
<Slider Maximum="100" Value="{Binding Source={x:Reference label}, Path=FontSize}" />

看起來好像沒啥意義的寫法，但這段是可以成功執行的，Slider 可以更改 Label 字的大小。


為什麼???

這就是我們接著要談的 Binding Mode -

Xamarin.Forms 教學系列文（十六.壹）Data Binding

學習目標

• BindingContext 寫法
• binding 物件寫法

這是個重量級的章節... 直接影響到第 18 章的 MVVM...雖然不用 MVVM 程式還是能動，但實際使用後，程式上的維護會方便很多 (少了參數傳遞及顯示處理)。

Events 和 event handler 在 Xamarin 的互動介面中是很重要的一件事，但其實 參數傳遞 以及將 資料顯示於畫面，是一件相當繁瑣的事情。

舉例來說，今天我要將 Slider 的值顯示於 Label，必須控制 Slider 的 ValueChanged 方法，再取出 Slider 的值塞進 Label.Text，道道程序後才能完成這件事，相當繁瑣啊 !!!

有鑑於此，Xamairn 提供了一種強力的解決方案 -- Data Binding

能夠將 兩個物件的屬性 連結起來，不需要再 手動處理 物件之間的傳遞與顯示

data binding 一般來說都寫在 XAML 內。

DataBinding 最重要的概念就是 來源 (Source) 和 目標 (Target)：

Target ← Source

來源 (Source) 是某個物件的屬性，其值改變時，同步去更新 目標 (Target) 屬性的值。

Xamarin.Forms 教學系列文（十五.肆）互動元件 -- SearchBar & DatePicker & TimePicker

學習目標

• SearchBar
• DatePicker
• TimePicker

看標題應該是知道這章節在介紹什麼了...

Xamarin.Forms 教學系列文（十五.參）互動元件 -- Entry & Editor

學習目標

• Entry - 單行文字
• Editor - 多行文字

Xamarin.Forms 定義了 Entry、Editor 和 SearchBar 三種可輸入文字 的元件，按下時會彈出鍵盤。

Entry 和 Editor 繼承自 InputView，而 SearchBar 繼承自 View，所以 SearchBar 的屬性會有較大的差異。

程式面來說，輸入元件 接收到了  Focus 的情況，才會將鍵盤顯彈出

和 Focus 有關係的五個方法、屬性和事件：

• Focus (方法) - 設置 focus，並在成功時回傳 true。
• Unfocus (方法) - 取消 focus。
• IsFocused (屬性) - 有 focus 時回傳 true。
• Focused (事件) - 已經 focus 時觸發。
• Unfocused (事件) - 失去 focus 時觸發。

Xamarin.Forms 教學系列文（十五.貳）互動元件 -- Switch & CheckBox

學習目標

• Switch
• CheckBox - Custom View

Switch 是 Xamarin.Forms 內作為開關，回傳布林值 (true | false) 的元件。

要注意的是 Xamarin.Forms 沒有提供 CheckBox，需自行用 ContentView 製作並編寫屬性

本小節最後會附上 範例程式 並讓大家更熟悉 自訂元件 的寫法。

Xamarin.Forms 教學系列文（十五.壹）互動元件 -- Slider & Stepper

學習目標

• Slider & 詭異的最小最大值
• Stepper

15 章主要在介紹 Xamarin 的互動元件 (輕鬆但繁瑣的一章啊...)

 Button 就屬於互動元件。

而本次要讓大家認識的有八種 ViewElement，分別列出對應的資料型態：

Data Type	Views
Double	Slider, Stepper
Boolean	Switch
String	Entry, Editor, SearchBar
DateTime	DatePicker, TimePicker

共會分成四個小節來介紹，先從 Slider 開始。

Xamarin Live Player -- Xamarin 開發神器 (附 2017 Preview 安裝教學)

我只能說這實在太酷了...
這兩天是 Visual Studio Build2017 大會，發表的新玩意兒內，除了很受到焦點的 Visual Studio For Mac，

還有 Xamarin 的新工具 --  Xamarin Live Player

這玩意兒可以大大的節省開發時間阿!!!!! 
>>> 先獻上 官網 <<<

Xamarin.Forms 教學系列文（十四.貳）Absolute layout - 元素大小自動計算 & XAML & Overlays

學習目標

• 第二個 Attached bindable propertie - LayoutFlagProperty
• XAML 寫法
• Overlays

延續上一小節的棋盤，
還記得當我們在 SizeChanged 時，會先去取得螢幕的寬高，再計算出方塊的大小。忘記了請看上圖...

如果... AbsoluteLayout 能自動幫我們計算方塊的大小...

沒錯... Xamarin 就是這麼貼心... 提供了另一個 Attached bindable propertie  - LayoutFlagProperty

可讓程式依照 比例 自動計算物件的大小。

LayoutFlagProperty 有兩個靜態方法可用：

• GetLayoutFlags()
• SetLayoutFlags()

使用 SetLayoutFlags() 時，需先指定要做自動計算的元素，可指定的元素由 AbsoluteLayoutFlags 類別內選擇成員，共八種：

• None
• XProportional
• YProportional
• PositionProportional
• WidthProportional
• HeightProportional
• SizeProportional
• All

Xamarin.Forms 教學系列文（十四.壹）Absolute layout & Attached bindable properties

學習目標

• AbsoluteLayout 用法
• 如何設定已存在元素之 Attached bindable properties

在前面的章節已經學過 ContentView, Frame, ScrollView 和 StackLayout 這幾個掌控畫面元件位置的 "畫板"。

而 AbsoluteLayout 顧名思義就是一個提供 "絕對位置" 的畫板。

不像 StackLayout 可以利用 HorizontalOptions 或 VierticalOptions 自動堆疊元件的位置。

在 AbsoluteLayout，你只能 自己指定 元件的位置。

而這章節有個前面沒看過的特殊屬性 -- Attached bindable property

用來 "再次設定" 已存在 AbsoluteLayout 內的元件。

Xamarin.Forms 教學系列文（十三.貳）從串流與不同平台載入圖片 & Toolbars

學習目標

• ImageSource.FromStream() - 從串流讀圖
• ImageSource.FromFile() - 各平台讀圖
• 了解各平台圖片解析度
• Toolbars

十三.壹 章節介紹了讀取圖片四種方法的前兩種，這節會介紹剩下的 FromStream() 和 FromFile()。

特別是 FromFile() 方法會從不同平台讀取圖片，更需要了解各圖片解析度之特性。

先從 FromStream() 開始：

Xamarin.Forms 教學系列文（十三.壹 - 1）非同步讀取 Uri 圖片

學習目標

• Device.BeginInvokeOnMainThread 非同步
• ActivityIndicator 轉圈圈等待圖

會將這支小程式獨立出來講解，主要原因是從 Uri 讀取圖片時會有短暫的延遲，

若有大量圖片要讀取話，一定會產生不好的使用者經驗，所以必須搭配非同步的方法來載圖。

直接上程式碼：

前端很單純，最上方一個 Image，中間一個 Label 顯示檔案名稱，一個 ActivityIndicator 轉圈圈，兩個 Button 切換前後張圖。

Xamarin.Forms 教學系列文（十三.壹）從網址或內嵌資源載入圖片

學習目標

• ImageSource.FromUri()  - 從網址讀圖
• Aspect - 圖片填滿方式
• ImageSource.FromResource() - 從 PCL 專案讀圖

由於各家平台顯示 Bitmaps 方式不太一樣。

於是 Xamrin 提供了 Image(我是類別) 來統合處理 Bitmaps 圖片的顯示。

Image 最重要的屬性為 Source，用來指定圖片的來源，其方法有四：

• ImageSource.FromUri() - 從網址載入
• ImageSource.FromResource() - 從 PCL 內嵌資源載入
• ImageSource.FromFile() - 從各平台專案內載入
• ImageSource.FromStream() - 從 .NET 提供的 Stream 載入

一般來說，FromUri() 和 FromResource() 用來讀取跟平台 無相依性 的圖片。

而 FromFile() 則用來針對不同平台取得不同的圖片，例如 MenuItem 或 ToolbarItem 的 Icon。


對應這四種方法，Image 還有三個子類別，UriImageSource、FileImageSource & StreamImageSource。

雖然在 .cs 內用 ImageSorce.FromXXX() 方法直接指定圖片來源比較方便，不過偶爾還是會在 XAML 內使用這三個子類別。

這章節會先從 FromUri()和 FromResource() 開始~

Xamarin.Forms 教學系列文（十二.貳）Implicit styles, 一種不用寫 key 的 Style

學習目標

• Implicit styles
• Dynamic styles
• Device styles

每一個 ResourceDictionary 都必須有 key 這個值，若你試著寫一個沒有 key 的 dictionary，一定會出現 NullException。

但是在這一小節，要介紹的是一個不用自己寫 key 的故事… 

在 Style 內若沒有寫 x:key，系統會由 TargetType 自動產生一組，並找到 TargetType 對應的 Visual Element 套用之。

這就是 Implicit style !!

(以 Button 為例，系統會產生 x:key = Xamarin.Forms.Button，不過你不需要知道)

底下為範例程式碼：

Xamarin.Forms 教學系列文（十二.壹）Styles - 多元件可套用樣式

學習目標

• Style 的基本屬性與寫法
• Setter Value 引用資源檔
• Style 繼承 - BaseOn

可以先複習一下 第十章，有個很重要的東西叫 ResourceDictionary 會在這章節出現。

Xamairn 提供了一個 Style 的類別，顧名思義... 有點類似網頁上的 css。

當同一個畫面上有許多物件要用到相同的屬性時，可以利用 Style 省下許多重複的標籤，讓程式碼簡潔，更好維護。

還記得第十章我們將 Button 的屬性值做成資源檔後用 StaticResource 呼叫：

    <Button Text=" Discere faciendo " 
            HorizontalOptions="{StaticResource horzOptions}" 
            VerticalOptions="{StaticResource vertOptions}" 
            BorderWidth="{StaticResource borderWidth}" 
            TextColor="{StaticResource textColor}"
            BackgroundColor="{StaticResource backgroundColor}"
            BorderColor="{StaticResource borderColor}" 
            FontSize="{StaticResource fontSize}" />

其實這樣寫也沒減少多少垃圾標籤...

所以需要 Style 來幫忙!!! 而 Style 也是 ResourceDictionary 的一種，

寫起來會像這樣：

  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="buttonStyle" TargetType="Button">
        …
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>

Xamarin.Forms 教學系列文（十.貳）擴充標籤 - 動態 & 客製化

學習目標

• DynamicResource
• ResourceDictionary 的階層制
• 客製化擴充標籤

延續上一小節的 Resource，除了 StaticResource 外，還有一個 DynamicResource，顧名思義就是要顯示動態資訊的資源檔，而最常見的動態資料就是時間。

直接來看程式，我們先在 C# 設定好 Resource，其值每秒都會更改：

        public partial class DynamicVsStaticPage : ContentPage
        {
            public DynamicVsStaticPage()
            {
                InitializeComponent();

                Device.StartTimer(TimeSpan.FromSeconds(1), () =>
                {
                    Resources["currentDateTime"] = DateTime.Now.ToString();
                    return true;
                });
                
            }
        }

Xamarin.Forms 教學系列文（十.壹）擴充標籤 - 靜態 & 資源檔使用

學習目標

• x:Static - XAML 類 C# 再來一發
• Resource - StaticResource - 可重複利用的擴充標籤

Xamarin 一直積極的要讓 XAML 做一些 C# 能做的事情，例如這一章節要講的擴充標籤  (markup extensions)。

在 C# 內要指派給 triangle.Angle1 值的話可以如下：

triangle.Angle1 = 45; 

triangle.Angle1 = 180 * radians / Math.PI; 

triangle.Angle1 = angles[i]; 

triangle.Angle1 = animator.GetCurrentAngle();

只要 結果回傳 是浮點數 (double) 就好。

但你沒辦法在 XAML 內寫上這種鬼東西的：

<triangle.Angle1>

    180 * radians / Math.PI

</triangle.Angle1>

讓哥懷念起 MVC 的 Razor 真是方便...

 鑒於以上原因，Xamarin 在 XAML 2009 規格內定義了 擴充標籤 (markup extensions)，讓我們在編寫 XAML 時能有更多的彈性。

Xamarin.Forms 教學系列文（八.貳 + 九）事件 x 觸擊 x 跨平台方法

學習目標

• XAML Events
• Tap gestures
• 跨平台方法實作與使用

這小節主要延續第八章 XAML 和 C# 的配合，介紹 XAML 事件指派，與設定任何 Visual Elements 都可以進行的 互動事件 ( GestureRecognizers )。

Xamarin GestureRecognizers 互動事件目前有三種，觸擊 (Tap)、縮放 (Pinch) 和 Pan (拖曳)。

最後講解第九章，針對不同平台的方法實作，與前面提到的 onplatform 不一樣，

因為有些 "共用" 方法還未出現於 Xamarin.Forms，所以必須將實作拉到 iOS 或 Android 專案內，再回到 Portable 專案內執行。

原文書第八章末和第九章其實有實作一個叫做 Monkey tap 的小遊戲 (篇幅滿大的)，但不會出現在本小節教學，有機會再另一開篇好了...

這系列的教學著重於方法的介紹。

Xamarin.Forms 教學系列文（八.壹）XAML 與 C# 完美配合

學習目標

• 從 XAML 使用參數與呼叫方法 來建構物件
• x:Name - Visual Elements 相對於 C# 的 ID
• 客製化 XAML View，可重複利用的 View

在建立 XAML 時都會附帶一支 .cs 檔案，除了將關注點分離外，也讓我們在寫 XAML 時擁有更多的彈性，能夠利用 .cs 去控制 XAML 的物件。

這也是我們稱呼為 code-behind 的作法。

此章節會比較分散，每一段落講解的東西都較獨立，基本上就是了解一下 XAML 和 cs 之間如何互相運作。

先來看一下如何在 XAML 類 C#，達到 建構物件 的目的。

Xamarin XAML Intellisense 失效/無作用

特地開一篇文章來講這件事好了，

有在使用 Visual Studio 應該知道，intellisense 是 coding 時不可或缺的內建工具...


什麼是 intellisense ??

就是當你按下第一個字元後出現的智慧選詞功能，

如圖：

Intellisense 可以避免很多我們打字時的失誤... 甚至加速編寫程式時的速度。

若我們寫 Xamarin XAML 時發現  Intellisense 失效...

會很幹。

Xamarin.Forms 教學系列文（七）XAML vs. code

學習目標

• XAML 與 code 的差異
• 屬性標籤（Property-element syntax）
• OnPlatform in XAML 
• 可省略的 Content property

XAML 是微軟拿來設計 Windows Phone 前端用，一種衍生自 XML 的標籤式語法。

最早出現於一般桌面 windows 應用程式~ 感謝 布陋閣 指證。

標籤式語法的好處就是關注點分離 (Separation of concerns，SOC)：

將邏輯從前端分離出來，可以讓前端設計師和程式設計師專注於他們要做的事情上 (幫台灣的全端工程師QQ)。 

另一個好處是較好維護，畢竟 Visual Elements 是以巢狀的方式去堆疊，而標籤語法維護巢狀時是相對容易的。

不過，XAML 有許多無法辦到的事情，例如迴圈、流程控制…等邏輯控制。

另外，Visual Studio 還沒支援拖曳物件設計前端 (或許未來吧?)，截至目前還是直接寫 code。

Xamarin.Forms 教學系列文（六.貳）App Lifecycle & Properties

本篇沒有圖就是狂。


學習目標

• Application.Current.Properties 不死系儲存值物件
• App Lifecycle
• App class 和 Page class 全域變數溝通

假設你在 六.壹 最後一個範例程式按下一長串重要的數字，卻來了一通電話導致 App 中斷 ( terminate )，當你結束通話後重新開啟 App，你還是會希望此串數字是 存在 的吧!

當然系統不會聰明到自動幫你存下這些資料，所以這一小節教你如何在 App 中斷時，手動存下資訊。

Xamarin.Forms 教學系列文（六.壹）Button

學習目標

• Button Clicked 事件
• sender 就是物件!
• StyleId 可為 View 物件唯一 Id

一般來說 Visual Elements 的特性可以簡單區分為 "純顯示" 和 "互動"。

例如，Label 就是一個 "純顯示" 的元件; 而最常見的 "互動" 元件就是 Button。

當手指按下 Button 時，手機會先給予使用者畫面上的回饋，等手指移開 Button 後，Clicked 事件才會被觸發。

若在 Clicked 事件內需要取得更多資訊時，可以使用事件參數（EventArgs）來傳遞資料。

Xamarin.Forms Previewer - Xaml 預覽器 with Visual Studio 2015

昨天上班聽同事說 Visual Studio 有 Xaml 預覽器這種神奇的東西... (一直沒發現...)

手癢的我下班回家就想玩看看，想不到要求還滿多的...

要滿足以下三點才能招喚預覽器：

1. Android SDK API 25 以上
2. JAVA JDK 1.8 以上
3. 專案要先建置

這一篇文章就帶大家一步一步滿足他...