Xamarin.Forms 用戶界面——控件——佈局——LayoutOptions

LayoutOptions

PDF用於離線使用

• 下載PDF

示例代碼：

• LayoutOptions

相關API：

• LayoutOptions

讓我們知道你對此的感受

最後更新：6個月前

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

概觀

該LayoutOptions結構封裝了兩種佈局首選項：

• 對齊 - 視圖的首選對齊方式，它決定了其父佈局中的位置和大小。
• 擴展 - 僅使用a StackLayout，並指示視圖是否應該使用額外的空間（如果可用）。

這些佈局首選項可以通過將結構中的一個公共字段View設置爲HorizontalOptions或VerticalOptions屬性來應用於相對於其父對象的屬性。公共領域如下：ViewLayoutOptions

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

的Start，Center，End，和Fill字段用於定義視圖的父佈局內對準：

• 對於水平對齊，Start位置在View父佈局的左側，並且對於垂直對齊，它將位於View父佈局的頂部。
• 對於水平和垂直對齊，Center水平或垂直居中View。
• 對於水平對齊，End定位在View父佈局的右側，並且對於垂直對齊，它將位於View父佈局的底部。
• 對於水平對齊，Fill確保View填充父佈局的寬度，並且爲了垂直對齊，它可以確保View填充父佈局的高度。

的StartAndExpand，CenterAndExpand，EndAndExpand，和FillAndExpand值被用於定義對準偏好和視圖是否會如果父內可用的佔用更多的空間StackLayout。

視圖HorizontalOptions和VerticalOptions屬性的默認值爲LayoutOptions.Fill。

對準

當父佈局包含未使用的空間（即，父佈局大於其所有子項的組合大小）時，對齊方式控制視圖在其父佈局中的位置。

一個StackLayout只有尊重了Start，Center，End，和Fill LayoutOptions對在相反的方向對孩子的看法場StackLayout方向。因此，兒童中的垂直方向的意見StackLayout可以設置其HorizontalOptions屬性的之一Start，Center，End，或Fill領域。同樣地，子內的水平方向的意見StackLayout可以設置其VerticalOptions屬性的之一Start，Center，End，或Fill領域。

一個StackLayout不尊重Start，Center，End，和Fill LayoutOptions對在同一個方向作爲孩子的意見領域StackLayout的取向。因此，垂直取向的StackLayout忽略Start，Center，End，或者Fill如果他們在設定領域VerticalOptions的子視圖屬性。同樣，水平方向的StackLayout忽略Start，Center，End，或者Fill如果他們在設定領域HorizontalOptions的子視圖屬性。

LayoutOptions.Fill通常覆蓋使用HeightRequest和WidthRequest屬性指定的大小請求 。

以下XAML代碼示例演示了一個垂直方向StackLayout，其中每個子項Label將其HorizontalOptions屬性設置爲來自LayoutOptions結構的四個對齊字段之一：

<StackLayout Margin="0,20,0,0">
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

等效的C＃代碼如下所示：

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

代碼生成以下屏幕截圖中顯示的佈局：

擴張

擴展控制視圖是否佔用更多空間（如果可用）StackLayout。如果StackLayout包含未用的空間（即，StackLayout大於它的所有子的組合尺寸更大），未使用的空間被均等地共享由所有子可以通過設置意見認爲請求膨脹HorizontalOptions或VerticalOptions屬性，以一個LayoutOptions使用該字段AndExpand後綴。請注意，當使用所有空格時StackLayout，擴展選項都不起作用。

A StackLayout只能朝向朝向的方向展開子視圖。因此，垂直取向的StackLayout可展開設定其子視圖VerticalOptions屬性的之一StartAndExpand，CenterAndExpand，EndAndExpand，或FillAndExpand字段，如果StackLayout包含未使用的空間。同樣，水平方向StackLayout可展開設定其子視圖HorizontalOptions屬性的之一StartAndExpand，CenterAndExpand，EndAndExpand，或FillAndExpand字段，如果StackLayout包含未使用的空間。

A StackLayout不能以與其方向相反的方向展開子視圖。因此，在垂直方向上StackLayout，將HorizontalOptions子視圖上的屬性設置爲StartAndExpand具有與設置屬性相同的效果Start。

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

以下XAML代碼示例演示了一個垂直方向StackLayout，其中每個子項Label將其VerticalOptions屬性設置爲LayoutOptions結構中的四個擴展字段之一：

<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>

等效的C＃代碼如下所示：

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

代碼生成以下屏幕截圖中顯示的佈局：

每個Label佔用相同的空間量StackLayout。然而，只有最終的Label，它的VerticalOptions屬性設置FillAndExpand有不同的大小。另外，每個Label都被一個小的紅色分開BoxView，這樣可以Label容易地看到佔據的空間。

概要

本文解釋了每個LayoutOptions結構值對視圖的對齊和擴展相對於其父對象的影響。在Start，Center，End，和Fill字段用於父佈局中定義的視圖的對齊，以及StartAndExpand，CenterAndExpand，EndAndExpand，和FillAndExpand字段被用來定義排列的偏好，並確定視圖是否會佔用更多的空間，如果有的話，內StackLayout。