Xamarin.Forms 版面配置選項 LayoutOptions

在這份筆記中，將會描述與測試關於 LayoutOptions 這個結構物件的意義；在 XAML 的每個項目(element)，例如：版面配置(Layout) 或者 控制項目內，都可以使用 HorizontalOptions 或者VerticalOptions 屬性(因為這兩個屬性定義在 View 類別內)，並且透過兩個屬性定義，可以決定當時版面配置或者控制項會出現或這對齊哪個地方。

底下是 LayoutOptions 的定義，從底下結構定義的程式碼內，可以得知

1. 當在 XAML 使用到有用到 HorizontalOptions 或者 VerticalOptions ，其定義的文字，會使用LayoutOptionsConverter 型別轉換器進行自動轉換，這也就是為什麼，您可以在 XAML 中，使用類似這樣的宣告 <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center"HorizontalOptions="Center" />
2. 不論是 HorizontalOptions 或者 VerticalOptions 屬性，都可以設定沒有 Expand 的四種值或者有包含 Expand 的值。
3. 若所指定的 LayoutOptions 沒有包含 Expand，表示這個項目要對其哪個地方；若有包含 Expand，表示這個項目要佔有剩下的空間，如果有的話。

這份筆記的範例專案可以底下網址取得

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFLayoutOptions

    //
    // 摘要:
    //     A struct whose static members define various alignment and expansion options.
    //
    // 備註:
    //     To be added.
    [TypeConverter(typeof(LayoutOptionsConverter))]
    public struct LayoutOptions
    {
        public static readonly LayoutOptions Center;
        public static readonly LayoutOptions CenterAndExpand;
        public static readonly LayoutOptions End;
        public static readonly LayoutOptions EndAndExpand;
        public static readonly LayoutOptions Fill;
        public static readonly LayoutOptions FillAndExpand;
        public static readonly LayoutOptions Start;
        public static readonly LayoutOptions StartAndExpand;

        public LayoutOptions(LayoutAlignment alignment, bool expands);

        public LayoutAlignment Alignment { get; set; }
        public bool Expands { get; set; }
    }

LayoutOptions 的意義(沒有 Expand)

1. Start
   定義的項目將會往最上方(垂直模式) 或者 最左邊(水平模式) 對齊。
2. Center
   定義的項目將會往中間(垂直模式 / 水平模式) 對齊。
3. End
   定義的項目將會往最下方(垂直模式) 或者 最右邊(水平模式) 對齊。
4. Fill
   這樣的定義與上述定位方式有些不同，這個項目將會延伸它的全部父項目 (Parent Element) 的大小。假使父項目所佔有的空間沒有比起他所有兒子項目來的大，您將不會看到有甚麼不同的對齊方式。這個設定項目，僅會在父項目擁有空間大於兒子項目的空間大小，才會有效果出現。

LayoutOptions 的意義(有 Expand)

若 LayoutOptions 的值後面有 Expand 文字，則表示當父項目的空間大於所有子項目所佔的空間，也就是說，當配置完所有的子項目之後，父項目還有多餘的空間；此時，XAML 系統會將剩下的空間，等比例的分配給有 Expand 的項目，而有 Expand 的子項目，將會佔據這些額外分配得到的空間，但是不需要將子項目填滿這些空間。

若 LayoutOptions 的值後面沒有 Expand 文字，就算父項目還有剩下的空間，它的子項目也不會獲得這些剩下的空間。

若父項目所擁有的空間沒有大於所有子項目所佔的空間總和，則就算有 Expand的值存在，也不會有任何效果產生。

範例執行成果

您可以實際下載這個範例專案來執行看看，並且按下每個按鈕，看看執行結果。

只要這些按鈕的父項目 StackLayout 沒有使用 Fill 屬性值，則這些按鈕的垂直版面配置選項是可以忽略的。

垂直版面配置選項只有當父項目 StackLayout 使用了 Fill 對其方式， 這樣父項目所擁有的空間就會大於所有子項目的空間，此時，若有使用了 Expand 的定義，這樣才會有所生效。