xamarin forms常用的佈局stacklayout詳解

摘要： 通過這篇文章你將瞭解到xamarin forms中最簡單常用的佈局StackLayout。至於其他幾種佈局使用起來，效果相對較差，目前在專案中使用最多的也就是這兩種佈局StackLayout和Grid。 之前上一家的的同事在寫xamarin android的時候，聊天給我說他寫axml佈局...

通過這篇文章你將瞭解到xamarin forms中最簡單常用的佈局StackLayout。至於其他幾種佈局使用起來，效果相對較差，目前在專案中使用最多的也就是這兩種佈局StackLayout和Grid。

之前上一家的的同事在寫xamarin android的時候，聊天給我說他寫axml佈局的時候都是拖控制元件，這有點重新整理我認知的下線，一直拖控制元件“歷史原因”，造成的壞處是顯而易見的，無法熟練掌握佈局的常用屬性，至於xamarin forms能不能拖控制元件，就目前來說是不能的，佈局的設計有兩種實現方式，一種是以c#程式碼的方式，一種是以xaml佈局的方式。

如下圖是xamarin forms中最見的五種佈局，本篇文章將使用最常用的一種佈局StackLayout，實現一個簡易計算器的佈局，便於熟悉和掌握這種佈局的各種屬性。

StackLayout相似於android中LinearLayout、前端css中的預設的Static定位；Grid相似於android中GridLayout，html中的Table佈局。

1.StackLayout佈局屬性和屬性值的作用

顧名思義，StackLayout是一種可以在上下方向、左右方向堆疊的佈局，簡單而又常用的佈局，我們需要掌握它的三個重要屬性，最重要的是佈局方向和佈局定位。

• Orientation :佈局方向，列舉型別，表示StackLayout以哪種方向的佈局， Vertical (垂直方向佈局) 和
  Horizontal（水平方向佈局）,預設值是Vertical.
• Spacing :double型別，表示每個子檢視之間的間隙, 預設值 6.0.
• VerticalOptions和HorizontalOptions：佈局定位（既可以定位又可以設定佈局元素大小），該屬性的屬性值有8個分別是
  1. Start：在父佈局開始位置
  2. Center：在父佈局中間位置
  3. End：在父佈局最後位置
  4. Fill：填充整個父佈局的位置
  5. StartAndExpand、CenterAndExpand、EndAndExpand、FillAndExpand，這種帶AndExpand的作用就是：根據其他佈局的內容大小，如果有空白位置就會自動填充。當多個屬性值都是AndExpand則會平分空白部分。
     直接來個佈局看看這些個屬性到底是怎麼用的吧
     

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamarinFormsLayout"
x:Class="XamarinFormsLayout.MainPage">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="Accent" VerticalOptions="FillAndExpand" Padding="10">
<Label Text="我在左邊" 
HeightRequest="100"
WidthRequest="200"
HorizontalOptions="Start"
VerticalOptions="Start"
BackgroundColor="AliceBlue"
TextColor="Black"
VerticalTextAlignment="Center"/>
<Label Text="我在右邊" 
HorizontalOptions="End"
VerticalOptions="End"
BackgroundColor="AliceBlue"
TextColor="Black"
VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal" BackgroundColor="Aquamarine" VerticalOptions="Start" HeightRequest="50">
<Label HorizontalOptions="Start" VerticalOptions="CenterAndExpand"Text="我在左邊" TextColor="Black" BackgroundColor="Azure"></Label>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"Text="佔滿中間位置" TextColor="Black" BackgroundColor="Azure"></Label>
<Label HorizontalOptions="End" VerticalOptions="CenterAndExpand"Text="我在右邊" TextColor="Black" BackgroundColor="Azure"></Label>
</StackLayout>
<StackLayout Orientation="Vertical" BackgroundColor="Accent"Padding="10"VerticalOptions="FillAndExpand">
<!-- Place new controls here -->
<Label Text="我在頂部,高度平分" 
HorizontalOptions="StartAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red"/>
<Label Text="我在中間，高度平分" 
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red"/>
<Label Text="我在底部" 
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand"
BackgroundColor="Red"/>
</StackLayout>
</StackLayout>
</ContentPage>

直接設定高度寬度可以用HeightRequest和WidthRequest；

2.StackLayout佈局重點需要掌握

2.1 VerticalOptions和HorizontalOptions與WidthRequest和HeightRequest的優先順序關係是什麼？

裡面兩個子StackLayout的高度各佔50%，我們發現** Options和**Request 的屬性值所定義的大小誰大就以誰的值為主。

2.2 在垂直方向（水平方向）設定寬度WidthRequest（高度HeightRequest）無效，如圖：

3.StackLayout實現一個簡易的計算器佈局

程式碼如下：

<?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="XamarinFormsLayout.CalculatorPage"
BackgroundColor="#808080">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="DefaultButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="Black"></Setter>
<Setter Property="TextColor" Value="#dedede"></Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Orientation="Vertical"Spacing="10" VerticalOptions="End" Padding="10">
<Frame BackgroundColor="White" HeightRequest="40" Margin="0,0,0,20">
<Label Text="0" VerticalOptions="Center" HorizontalOptions="End"TextColor="Black"FontSize="35"/>
</Frame>
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal"Spacing="10">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<ButtonText="清除" HeightRequest="60" Style="{StaticResource DefaultButton}"/>
<StackLayout Orientation="Horizontal" HeightRequest="60">
<Button HorizontalOptions="FillAndExpand"Text="7"Style="{StaticResource DefaultButton}"/>
<Button HorizontalOptions="FillAndExpand"Text="8" Style="{StaticResource DefaultButton}" />
<Button HorizontalOptions="FillAndExpand"Text="9" Style="{StaticResource DefaultButton}" />
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="60">
<Button HorizontalOptions="FillAndExpand"Text="4" Style="{StaticResource DefaultButton}" />
<Button HorizontalOptions="FillAndExpand"Text="5" Style="{StaticResource DefaultButton}"/>
<Button HorizontalOptions="FillAndExpand"Text="6" Style="{StaticResource DefaultButton}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="60">
<Button HorizontalOptions="FillAndExpand"Text="1" Style="{StaticResource DefaultButton}" />
<Button HorizontalOptions="FillAndExpand"Text="2" Style="{StaticResource DefaultButton}"/>
<Button HorizontalOptions="FillAndExpand"Text="3" Style="{StaticResource DefaultButton}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="60">
<Button HorizontalOptions="FillAndExpand"Text="0" Style="{StaticResource DefaultButton}"/>
<Button HorizontalOptions="FillAndExpand"Text="." Style="{StaticResource DefaultButton}"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" WidthRequest="60">
<ButtonText="÷"HeightRequest="60" Style="{StaticResource DefaultButton}"/>
<Button Text="*" HeightRequest="60" Style="{StaticResource DefaultButton}"/>
<Button Text="+" HeightRequest="60" Style="{StaticResource DefaultButton}"/>
<Button Text="-" HeightRequest="60" Style="{StaticResource DefaultButton}"/>
<Button Text="=" HeightRequest="60" Style="{StaticResource DefaultButton}"/>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>

4.總結

xamarin forms的佈局都是基於wpf的思想，padding和margin的四個方向是左上右下，這和android、前端css的四個方向上右下左有點區別。

常用的佈局就我個人而言StackLayout和Grid使用的最為廣泛和簡單，其他的幾種佈局寫起來相對複雜，效果也相對不佳。