Xamarin.Forms之布局

參考官網文檔

StackLayout

StackLayout在水平或垂直的一維線（“堆棧”）中組織視圖，可以使用布局選項根據布局中的空間調整StackLayout中的視圖大小，位置由將視圖添加到布局中的順序和視圖的布局選項確定。

“Orientation”屬性指定元素的方向，默認方向為“Vertical”（垂直）。StackLayout通常用於在頁面上排列UI的子部分。

StackLayout通常用作父布局，其中包含其他子布局。 但是，不應使用StackLayout通過組合使用StackLayout對象來重現Grid布局。 以下代碼顯示了這種不良做法的示例：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

以上寫法是浪費的，因為執行了不必要的布局計算。 而是，可以使用Grid網格更好地實現所需的布局。

注：使用StackLayout時，請確保僅將一個子元素設置為LayoutOptions.Expands。 此屬性確保指定的子項將占用StackLayout可以分配給它的最大空間，並且多次執行這些計算是浪費的。

Spacing間距
Spacing屬性控制子級之間的間距，默認值為6px。通過在StackLayout上設置Spacing屬性，可以將其控制或設置為無邊距。

Size
StackLayout中視圖的大小取決於高度和寬度以及布局選項，StackLayout將強制執行填充，以下LayoutOptions將導致視圖占用布局中可用的空間：

• CenterAndExpand –使視圖在布局中居中並擴展以占用布局將提供的空間。
• EndAndExpand –將視圖放置在布局的末尾（底部或最右邊的邊界），並展開以占用布局將提供的盡可能多的空間。
• FillAndExpand –放置視圖，使其沒有填充，並占用布局將提供的盡可能多的空間。
• StartAndExpand –將視圖放置在布局的開始，並占用父級將提供的盡可能多的空間。

Grid

網格用於顯示行和列中的元素，這些元素可以具有比例或絕對大小。 網格的行和列通過RowDefinitions和ColumnDefinitions屬性指定。

要將元素放置在特定的Grid單元中，請使用Grid.Column和Grid.Row附加屬性。 若要使元素跨越多個行和列，請使用Grid.RowSpan和Grid.ColumnSpan附加屬性。

提示：網格布局不應與表混淆，也不應用於呈現表格數據。 Grid 沒有行、 列或單元格格式的概念，與HTML表不同，Grid純粹用於對內容進行布局。 為了顯示表格數據，請考慮使用ListView，CollectionView或TableView。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           Width="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

在此示例中，大小是按如下來確定的：

• 每行的顯式高度為50個獨立於設備的單元。
• 第一列的寬度設置為“自動”，因此寬度與其子級所需的寬度相同。 在這種情況下，其寬度為200個與設備無關的單元，以適應第一個Label的寬度。

通過使用Auto自動調整大小，可以在列或行中分配空間，這可以使列和行的大小適合其內容，這是通過將RowDefinition的高度或ColumnDefinition的寬度設置為Auto來實現的。

比例大小調整還可用於按加權比例在網格的行和列之間分配可用空間。 這是通過將RowDefinition的高度或ColumnDefinition的寬度設置為使用*運算符的值來實現的。

注：嘗試確保將盡可能少的行和列設置為“Auto”，每個自動調整大小的行或列都會使布局引擎執行其他布局計算。 相反，請盡可能使用固定大小的行和列，或者，使用GridUnitType.Star（*）設置行和列以占據一定比例的空間。

用法
與傳統表不同，Grid不會從內容中推斷行和列的數量和大小，而是，Grid具有RowDefinitions和ColumnDefinitions集合，這些保存了將要布置多少行和列的定義。 使用指定的行索引和列索引將視圖添加到Grid，這些索引標識視圖應放置在哪行和列中。

行和列
行和列信息存儲在Grid的RowDefinitions和ColumnDefinitions屬性中，這些屬性分別是RowDefinition和ColumnDefinition對象的集合，RowDefinition具有單個屬性Height，而ColumnDefinition具有單個屬性Width。 高度和寬度的選項如下：

• 自動–自動調整大小以適合行或列中的內容。 在C＃中指定為GridUnitType.Auto，在XAML中指定為Auto。
• 比例（*）–按剩余空間的比例調整列和行的大小。 在C＃中指定為值和GridUnitType.Star，在XAML中指定為＃*，其中＃是您想要的值（數字，為1可以省略）。 用*指定一行/列將使其填充可用空間。
• 絕對–使用特定的固定高度和寬度值調整列和行的大小。 在C＃中指定為值和GridUnitType.Absolute，在XAML中指定為＃，其中＃是您想要的值。

注：Xamarin.Forms中列的寬度值默認設置為*，以確保該列將填充可用空間。 默認情況下，行的高度值也設置為*。

間距
網格具有控制行和列之間的間距的屬性。 以下屬性可用於自定義網格：

• ColumnSpacing –列之間的空間量。 此屬性的默認值為6。
• RowSpacing –行之間的空間量。 此屬性的默認值為6。

跨度
通常，在使用網格時，有一個元素應占據多個行或一列。

<Button Text = "0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" />

FlexLayout

介紹

使用FlexLayout（彈性布局）堆疊或包裝子視圖的集合。Xamarin.Forms FlexLayout是Xamarin.Forms 3.0版中的新功能。

FlexLayout與StackLayout相似，因為它可以在堆棧中水平和垂直地排列其子級。但是，如果在單個行或列中容納的子項​​太多，則FlexLayout也可以包裝其子項，並且還具有許多方向，對齊方式和適應各種屏幕尺寸的選項。

FlexLayout從Layout<View>派生，並繼承IList<View>類型的Children屬性。它定義了六個公共可綁定屬性和五個附加的可綁定屬性，這些屬性影響其子元素的大小，方向和對齊方式。

常見使用場景

1、使用FlexLayout進行簡單堆棧
官網示例 “Simple Stack”頁面顯示了FlexLayout如何替代StackLayout但具有更簡單的標記。 此示例中的所有內容都在XAML頁中定義，FlexLayout包含四個子代：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

文件中顯示了FlexLayout的三個屬性：

• Direction屬性：設置為FlexDirection枚舉的值，默認值為Row。將屬性設置為Column會導致FlexLayout的子級排列在單個列中。當FlexLayout中的項目排列在列中時，FlexLayout被稱為具有垂直主軸和水平交叉軸。
• AlignItems屬性：類型為FlexAlignItems，並指定如何在交叉軸上對齊項目，Center選項使每個項目水平居中。如果您為此任務使用StackLayout而不是FlexLayout，則可以通過將每個項目的HorizontalOptions屬性分配給Center來居中所有項目。 HorizontalOptions屬性不適用於FlexLayout的子級，但是單個AlignItems屬性可以實現相同的目標。 如果需要，可以使用AlignSelf附加的bindable屬性覆蓋單個項目的AlignItems屬性。

• JustifyContent屬性：類型為FlexJustify，並指定如何在主軸上排列項目。SpaceEvenly選項在所有項目之間，第一個項目上方和最后一個項目下方平均分配所有剩余的垂直空間。

  如果使用的是StackLayout，則需要將每個項目的VerticalOptions屬性分配給CenterAndExpand以實現類似的效果。 但是CenterAndExpand選項在每個項目之間分配的空間是第一個項目之前和最后一個項目之后的兩倍。 您可以通過將FlexLayout的JustifyContent屬性設置為SpaceAround來模仿VerticalOptions的CenterAndExpand選項。

2、Using FlexLayout for wrapping items

示例：Photo Wrapping

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

• Wrap屬性：是枚舉類型FlexWrap，如果一行（列）上有太多項目，則此屬性設置將導致這些項目換行到下一行（列）。

請注意，FlexLayout是ScrollView的子級。 如果頁面上有太多行，則ScrollView的默認Orientation屬性為Vertical，並允許垂直滾動。

• JustifyContent屬性：值SpaceAround，在主軸（水平軸）上分配剩余空間，以便每個項目都被相同數量的空白包圍。

3、Page layout with FlexLayout

例如，頁面布局由頁面頂部的頁眉和底部的頁腳組成，兩者都延伸到頁面的整個寬度，主要內容位於頁面的中心，但通常在內容的左側具有柱狀菜單，而在右側則具有補充信息（有時稱為備用區域）。

FlexLayoutDemos示例的Holy Grail Layout頁面顯示了使用一個嵌套在另一個FlexLayout中的FlexLayout對該布局的簡單實現。 由於此頁面是為縱向模式下的手機設計的，因此內容區域左右兩側的區域僅50像素寬：

示例使用了三個附加的可綁定屬性【在彈性布局子控件上使用】：

• Order屬性：是在第一個BoxView上設置的，此屬性是一個整數，默認值為0，您可以使用此屬性更改布局順序。通常，開發人員希望頁面的內容在導航項和旁項之前出現在標記中，將第一個BoxView上的Order屬性設置為小於其其他同級元素的值，將使其顯示為該行的第一項。同樣，可以通過將Order屬性設置為大於其同級的值來確保最后顯示一個項目。
• Basic屬性：以使其寬度為50像素，此屬性的類型為FlexBasis，該結構定義了名為默認值的FlexBasis類型的靜態屬性Auto。您可以使用“Basic”指定像素大小或百分比，以指示該項目在主軸上占據的空間，之所以稱為基礎，是因為它指定了作為所有后續布局基礎的項目大小。
• 在嵌套布局和代表內容的Label子項上設置Grow屬性：此屬性的類型為float，默認值為0。當設置為正值時，沿主軸線的所有剩余空間將分配給該項目以及具有正值Grow的兄弟姐妹，空間與值成比例分配，有點像網格中的星型規范。

在嵌套的FlexLayout上設置了第一個“Grow”屬性，指示該FlexLayout將占據外部FlexLayout中所有未使用的垂直空間。在表示內容的Label上設置了第二個Grow附加屬性，指示該內容將占據內部FlexLayout中所有未使用的水平空間。

4、Catalog items with FlexLayout

示例：水平滑動，

水平的FlexLayout里面嵌套着垂直的FlexLayout，

可綁定屬性

FlexLayout定義了六個可綁定屬性，這些屬性是您在FlexLayout本身上設置的以控制方向和對齊方式。 

示例的“Experiment”頁面嘗試五個可綁定屬性，此頁面允許您從FlexLayout中添加或刪除子項，以及設置五個可綁定屬性的組合。FlexLayout的所有子級都是各種顏色和大小的Label視圖，其Text屬性設置為與其在Children集合中位置相對應的數字。

程序啟動時，五個Picker視圖將顯示這五個FlexLayout屬性的默認值，屏幕底部的FlexLayout包含三個子項label：

1、The Direction property

• Column
• ColumnReverse (or "column-reverse" in XAML)
• Row, the default
• RowReverse (or "row-reverse" in XAML)

在XAML中，可以使用小寫，大寫或大小寫混合的枚舉成員名稱來指定此屬性的值，或者可以使用括號中顯示的與CSS指示符相同的兩個附加字符串。 （“列反向”和“行反向”字符串在XAML解析器使用的FlexDirectionTypeConverter類中定義。）

這是“Experiment”頁面，顯示（從左到右），行方向，列方向和列反向：

 

2、The Wrap property

• NoWrap, the default
• Wrap，當一行或者列上不夠空間排布子控件時，自動換到下一行或者列
• Reverse (or "wrap-reverse" in XAML)，超出會換行，但是是反的

當Wrap屬性設置為NoWrap且主軸受到約束，並且主軸的寬度或高度不足以容納所有子代時，FlexLayout會嘗試使項目變小，而不會換行或者列，可能會造成顯示不全。

3、The JustifyContent property

• Start (or "flex-start" in XAML), the default
• Center
• End (or "flex-end" in XAML)
• SpaceBetween (or "space-between" in XAML)
• SpaceAround (or "space-around" in XAML)
• SpaceEvenly

此屬性指定項目在主軸上的間距。Center選項：所有項目均移至中心。 以單詞Space開頭的其他三個選項分配項目未占用的額外空間。 SpaceBetween在項目之間平均分配空間； SpaceAround在每個項目之間放置相等的空間，而SpaceEvenly在每個項目之間以及該行的第一個項目之前和最后一個項目之后放置相等的空間。

4、The AlignItems property

• Stretch 拉伸, the default
• Center
• Start (or "flex-start" in XAML)
• End (or "flex-end" in XAML)

這是兩個屬性之一（另一個是AlignContent），該屬性指示子代在交叉軸上的對齊方式。 在每一行中，子級會被拉伸，或者在每個項目的start，center或end對齊，

對於任何單個項目，都可以使用AlignSelf附加的bindable屬性覆蓋AlignItems設置。

5、The AlignContent property

• Stretch, the default
• Center
• Start (or "flex-start" in XAML)
• End (or "flex-end" in XAML)
• SpaceBetween (or "space-between" in XAML)
• SpaceAround (or "space-around" in XAML)
• SpaceEvenly

 與AlignItems一樣，AlignContent屬性也可以使子對象在交叉軸上對齊，但會影響整個行或列。

附加的可綁定屬性

FlexLayout定義了五個附加的可綁定屬性，這些屬性在FlexLayout的子代上設置，並且僅與該特定子代有關。

• AlignSelf：此屬性設置將覆蓋FlexLayout本身上設置的AlignItems屬性。 默認值：Auto，表示使用AlignItems設置。
• Order：默認值是0，此屬性允許您更改FlexLayout的子級的排列順序。通常，FlexLayout的子級的排列順序與它們在Children集合中出現的順序相同。 您可以通過將一個或多個子代上的Order屬性設置為非零整數值來覆蓋此順序。 然后，FlexLayout根據每個子級上Order屬性的設置來排列其子級，但是具有相同Order設置的子級將按照它們在Children集合中出現的順序進行排列。
• Basis ：指示在主軸上分配給FlexLayout的子級的空間量。表示在將孩子按行排列時的寬度，或當孩子按列排列時的高度。其大小可以以與設備無關的單位或FlexLayout大小的百分比形式指定。默認值為靜態屬性FlexBasis.Auto，這意味着將使用子級請求的寬度或高度。
• Grow：類型為int，默認值為0，並且該值必須大於或等於0。當Wrap屬性設置為NoWrap且子行的總寬度小於FlexLayout的寬度，或者子列的高度比FlexLayout短時，Grow屬性將起作用。 Grow屬性指示如何在子級之間分配剩余空間。
• Shrink：收縮，類型為int，默認值為1，並且該值必須大於或等於0。當Wrap屬性設置為NoWrap並且子行的合計寬度大於FlexLayout的寬度，或者一列子項的合計高度大於FlexLayout的高度時，Shrink屬性將起作用 。 通常，FlexLayout將通過限制其大小來顯示這些子項。 “Shrink”屬性可以指示哪些子項在全尺寸顯示時具有優先權。

FlexLayout的CSS樣式

可以將Xamarin.Forms 3.0引入的CSS樣式功能與FlexLayout結合使用。 FlexLayoutDemos示例的CSS Catalog Items頁面復制了Catalog Items頁面的布局，但是具有許多樣式的CSS樣式表：

frame {
    width: 300px;
    height: 480px;
    background-color: lightyellow;
    margin:10px;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

這里引用了幾個FlexLayout附加的可綁定屬性。 在label.empty選擇器中，您將看到flex-grow屬性，該屬性為空Label設置樣式，以在Button上方提供一些空白。 圖像選擇器包含一個order屬性和一個align-self屬性，這兩個屬性都對應於FlexLayout附加的可綁定屬性。

可以直接在FlexLayout上設置屬性，也可以在FlexLayout的子級上設置附加的可綁定屬性。 或者，您可以使用傳統的基於XAML的樣式或CSS樣式間接設置這些屬性，重要的是要了解和理解這些屬性。 這些屬性使FlexLayout真正具有靈活性。

RelativeLayout

盡可能避免使用RelativeLayout，因為它將導致CPU必須執行更多的工作。

AbsoluteLayout

AbsoluteLayout（絕對布局）位置和大小子元素與其自身的大小和位置或絕對值成正比，可以使用比例值或靜態值來定位和調整子視圖的大小，並可以混合比例值和靜態值。

AbsoluteLayout用於使用顯式值或相對於布局大小的值來定位和調整元素的大小，該位置由子級的左上角相對於AbsoluteLayout的左上角指定。

此布局的標准用法是創建一個覆蓋圖，該覆蓋圖用其他控件覆蓋頁面，也許是為了保護用戶避免與頁面上的常規控件進行交互。

注：HorizontalOptions和VerticalOptions屬性對AbsoluteLayout的子級無效。盡可能避免使用AbsoluteLayout.AutoSize屬性，因為它將導致布局引擎執行其他布局計算。

在AbsoluteLayout中，AbsoluteLayout.LayoutBounds附加屬性用於指定元素的水平位置，垂直位置，寬度和高度。 此外，AbsoluteLayout.LayoutFlags附加屬性指定如何解釋布局范圍。

目的

由於使用AbsoluteLayout的定位模型，布局使定位元素相對簡單，使元素與布局的任何一側齊平或居中。 使用比例大小和位置，AbsoluteLayout中的元素可以自動縮放到任何視圖大小。 對於僅位置而不是尺寸應縮放的項目，可以混合使用絕對值和比例值。

AbsoluteLayout可以在需要在視圖中放置元素的任何地方使用，在將元素與邊緣對齊時特別有用。

用法

1、比例布局
AbsoluteLayout具有唯一的錨模型，通過使用比例定位，當元素相對於布局定位時，元素的錨相對於其元素定位。 使用絕對定位時，錨點位於視圖內的（0,0）。 這有兩個重要的后果：

• 不能使用比例值將元素放置在屏幕之外。
• 無論布局或設備的大小如何，都可以將元素可靠地放置在布局的任何一側或中心。

像RelativeLayout一樣，AbsoluteLayout能夠定位元素，使其重疊。

2、指定值
AbsoluteLayout中的視圖使用四個值定位：

• X –視圖錨點的x（水平）位置
• Y –視圖錨點的y（垂直）位置
• 寬度–視圖的寬度
• 高度–視圖的高度

這些值中的每一個都可以設置為比例值或絕對值。

將值指定為界限（bounds）和標志（flag）的組合，LayoutBounds是一個矩形，由四個值組成：x，y，寬度，高度。

3、AbsoluteLayoutFlags

AbsoluteLayoutFlags指定如何解釋值，並具有以下預定義選項：

• None-將所有值解釋為絕對值。如果未指定布局標志，則這是默認值。
• All-將所有值解釋為成比例的。
• WidthProportional –將“寬度”值解釋為成比例的，將所有其他值解釋為絕對值。
• HeightProportional –僅將高度值解釋為與所有其他絕對值成比例。
• XProportional –將X值解釋為比例，而將所有其他值視為絕對值。
• YProportional –將Y值解釋為成比例的，而將所有其他值視為絕對值。
• PositionProportional –將X和Y值解釋為成比例，而大小值則解釋為絕對值。
• SizeProportional –將Width和Height值解釋為成比例的，而位置值是絕對的。

在XAML中，使用AbsoluteLayout.LayoutBounds屬性將邊界和標志設置為布局內視圖定義的一部分。邊界設置為以逗號分隔的值，X，Y，寬度和高度的列表。還使用AbsoluteLayout.LayoutFlags屬性在布局的視圖聲明中指定標志。請注意，可以在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="LayoutSamples.AbsoluteLayoutExploration"
Title="Absolute Layout Exploration">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Label Text="I'm centered on iPhone 4 but no other device"
                AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
            <Label Text="I'm bottom center on every device."
                AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
                LineBreakMode="WordWrap"  />
            <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

請注意以下幾點：

• 使用絕對大小和位置值來定位位於中心的標簽。 因此，它似乎以iPhone 4S及更低版本為中心，而不是以較大的設備為中心。
• 使用比例大小和位置值定位布局底部的文本。 它總是出現在版面的底部中心，但是其尺寸會隨着版面尺寸的增加而增大。
• 使用比例位置和絕對尺寸將三個彩色的BoxView定位在屏幕的頂部，左側和右側。

4、比例值
比例值定義布局和視圖之間的關系，此關系將子視圖的位置或比例值定義為父布局的相應值的比例。 這些值表示為雙精度值，介於0和1之間。

比例值用於在布局中定位和調整視圖大小。 因此，將視圖的寬度設置為比例時，結果寬度值是比例乘以AbsoluteLayout的寬度。 例如，如果AbsoluteLayout的寬度為500，並且視圖的比例寬度設置為.5，則視圖的渲染寬度將為250=（500 x .5）。

要使用比例值，請使用（x，y）比例和比例大小設置LayoutBounds，然后將LayoutFlags設置為All。

在XAML中：

<Label Text="I'm bottom center on every device."
  AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"  />

對應的C#

var label = new Label {Text = "I'm bottom center on every device."};
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(.5,1,.5,.1));
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.All);

5、絕對值

絕對值明確定義視圖在布局中的位置。 與比例值不同，絕對值能夠定位和調整不適合布局范圍的視圖。

當布局的大小未知時，使用絕對值進行定位可能很危險。 使用絕對位置時，屏幕中央的一種尺寸的元素可能會偏移其他任何尺寸。 在支持的設備的各種屏幕尺寸上測試應用程序非常重要。

要使用絕對布局值，請使用（x，y）坐標和顯式尺寸設置LayoutBounds，然后將LayoutFlags設置為None（默認的）。

 

 

 

Layout Options布局選項

每個Xamarin.Forms視圖都有LayoutOptions類型的HorizontalOptions和VerticalOptions屬性。 本文介紹了每個LayoutOptions值對視圖的對齊和擴展的影響。

介紹

LayoutOptions結構封裝了兩個布局首選項：

• Alignment對齊–視圖的首選對齊方式，它確定其在其父布局中的位置和大小。
• Expansion擴展-僅由StackLayout使用，並指示視圖是否應使用額外的空間（如果有）。

通過將View的HorizontalOptions或VerticalOptions屬性設置為LayoutOptions結構中的公共字段之一，可以相對於其父級將這些布局首選項應用於View。 公共字段如下：

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

The Start, Center, End, and Fill 用於在父布局中定義視圖的對齊方式：

• 對於水平對齊，“Start”將視圖放置在父布局的左側，對於垂直對齊，將“視圖”放置在父布局的頂部。
• 對於水平和垂直對齊，“Center”水平或垂直居中將視圖居中。
• 對於水平對齊，“End”將視圖放置在父布局的右側，對於垂直對齊，將“視圖”放置在父布局的底部。
• 對於水平對齊，“Fill”可確保視圖填充父布局的寬度，對於垂直對齊，可確保視圖填充父布局的高度。

StartAndExpand，CenterAndExpand，EndAndExpand和FillAndExpand值用於定義對齊方式首選項，以及視圖是否在父StackLayout中可用時是否占用更多空間。

注：視圖的HorizontalOptions和VerticalOptions屬性的默認值為LayoutOptions.Fill。

Alignment

對齊控制當父布局包含未使用的空間（即，父布局大於其所有子項的總大小）時，視圖如何在其父布局中定位。

StackLayout僅遵循與StackLayout方向相反的子視圖上的Start，Center，End和Fill LayoutOptions字段。因此，垂直方向的StackLayout中的子視圖可以將其Horizo​​ntalOptions（水平方向布局）屬性設置為“開始”，“中心”，“結束”或“填充”字段之一。同樣，水平放置的StackLayout中的子視圖可以將其VerticalOptions屬性設置為“開始”，“中心”，“結束”或“填充”字段之一。

StackLayout不遵循與StackLayout方向相同的方向的子視圖上的Start，Center，End和Fill LayoutOptions字段。因此，如果在子視圖的VerticalOptions屬性上設置了垂直方向的StackLayout，則會忽略“開始”，“居中”，“結束”或“填充”字段。同樣，如果在子視圖的Horizo​​ntalOptions屬性中設置了“水平”，“居中”，“結束”或“填充”字段，則它們在水平方向上將被忽略。

即：

<!--水平方向的StackLayout的子視圖設置HorizontalOptions為Start,Center,End,Fill無效-->
            <StackLayout Orientation="Horizontal">
                <Label Text="Start_2" HorizontalOptions="Start"></Label>
                <Label Text="Center_2" HorizontalOptions="Center"></Label>
            </StackLayout>

注：LayoutOptions.Fill通常會覆蓋使用HeightRequest和WidthRequest屬性指定的尺寸請求。

Expansion

擴展控制視圖是否在StackLayout中占用更多空間（如果有更多空間）。如果StackLayout包含未使用的空間（即，StackLayout大於其所有子項的總大小），則通過將其Horizo​​ntalOptions或VerticalOptions屬性設置為LayoutOptions字段（使用AndExpand后綴），從而請求擴展的所有子視圖均會平均共享未使用的空間。請注意，當使用了StackLayout中的所有空間時，擴展選項無效。

StackLayout只能沿其方向擴展子視圖。因此，如果StackLayout包含未使用的空間，則垂直方向的StackLayout可以展開將其VerticalOptions（垂直布局）屬性設置為StartAndExpand，CenterAndExpand，EndAndExpand或FillAndExpand字段之一的子視圖。同樣，如果StackLayout包含未使用的空間，則水平放置的StackLayout可以展開將其Horizo​​ntalOptions屬性設置為StartAndExpand，CenterAndExpand，EndAndExpand或FillAndExpand字段之一的子視圖。

StackLayout不能沿與其方向相反的方向展開子視圖。因此，在垂直方向的StackLayout上，將子視圖上的Horizo​​ntalOptions屬性設置為StartAndExpand與將屬性設置為Start具有相同的效果。

注：啟用擴展不會更改視圖的大小，除非它使用LayoutOptions.FillAndExpand。

示例：StackLayout默認是垂直布局

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

注意，label在垂直方向的位置。

Margin and Padding 邊距和填充

介紹

當在用戶界面中呈現元素時，“邊距”和“填充”屬性控制布局行為。

邊距和填充是布局的概念：

• Margin屬性：表示元素與其相鄰元素之間的距離，並用於控制元素的渲染位置及其鄰居的渲染位置。 可以在布局和視圖類上指定邊距值。外邊距
• Padding屬性：表示元素與其子元素之間的距離，並用於將控件與其自身的內容分開。 填充值可以在布局類中指定。內邊距

下圖說明了兩個概念：

 請注意，邊距值是可加的。 因此，如果兩個相鄰元素的邊距指定為20像素，則元素之間的距離將為40像素。 另外，在同時應用margin和padding的情況下，元素和任何內容之間的距離將是margin加padding的值。

指定Thickness
邊距和填充屬性均為“Thickness”類型。 創建“Thickness”結構時，存在三種可能性：

• 創建由單個統一值定義的“Thickness”結構。 單個值應用於元素的左側，頂部，右側和底部。
• 創建由水平和垂直值定義的“Thickness”結構。 水平值對稱地應用於元素的左側和右側，而垂直值對稱地應用於元素的頂部和底部。
• 創建由四個不同的值定義的“Thickness”結構，這些值分別應用於元素的左側，頂部，右側和底部。

注：Thickness值可以為負，通常會剪切或覆蓋內容。

Input transparency

每個可視元素都有一個InputTransparent屬性（輸入透明），該屬性用於定義該元素是否接收輸入。 其默認值為false，以確保該元素接收輸入。

在布局類上設置此屬性后，其值將傳輸到子元素。 因此，在布局類上將InputTransparent屬性設置為true將導致布局內的所有元素都不接收輸入。

Layout performance

為了獲得最佳的布局性能，請遵循“優化布局性能”中的准則。

此外，還可以通過使用布局壓縮來提高頁面渲染性能，該布局壓縮可從視覺樹中刪除指定的布局。 有關更多信息，請參見布局壓縮。