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 內的元件。