Içindeki Düzen Seçenekleri Xamarin.Forms

Her Xamarin.Forms görünüm, LayoutOptions türünde HorizontalOptions ve VerticalOptions özelliklerine sahiptir. Bu makalede, her LayoutOptions değerinin bir görünümü hizalama ve genişletme üzerindeki etkisi açıklanmaktadır.

Genel bakış

Yapı LayoutOptions iki düzen tercihini kapsüller:

• Hizalama : Görünümün tercih edilen hizalaması, üst düzenindeki konumunu ve boyutunu belirler.
• Genişletme – yalnızca bir StackLayouttarafından kullanılır ve görünümün kullanılabilir durumdaysa fazladan alan kullanması gerekip gerekmediğini belirtir.

Bu düzen tercihleri, öğesinin veya özelliğini yapıdan LayoutOptions ortak alanlardan birine ayarlayarak HorizontalOptions üst öğesine göre uygulanabilirView.View VerticalOptions Ortak alanlar aşağıdaki gibidir:

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

Start, Center, Endve Fill alanları, görünümün üst düzendeki hizalamasını tanımlamak için kullanılır:

• Yatay hizalama için, Start View öğesini üst düzenin sol tarafına, dikey hizalama için ise üst düzenin en üstüne konumlandırın View .
• Yatay ve dikey hizalama için, Center yatay veya dikey olarak ortalar View.
• Yatay hizalama için, End View öğesini üst düzenin sağ tarafına, dikey hizalama için ise üst düzenin en altına konumlandırın View .
• Yatay hizalama için, Fill üst düzenin View genişliğini doldurmasını ve dikey hizalama için üst düzenin View yüksekliğini doldurmasını sağlar.

StartAndExpand, CenterAndExpand, EndAndExpandve FillAndExpand değerleri, hizalama tercihini tanımlamak ve görünümün üst StackLayoutiçinde kullanılabilirse daha fazla alan kaplayıp kaplamayacağını tanımlamak için kullanılır.

Hizalama

Hizalama, üst düzen kullanılmayan alan içerdiğinde (yani, üst düzen tüm alt öğelerinin birleşik boyutundan daha büyük olduğunda) görünümün üst düzeni içinde nasıl konumlandırıldığını denetler.

Yalnızca StackLayout alt görünümlerde yönlendirmenin Starttersi yönde StackLayout olan , Center, Endve Fill LayoutOptions alanlarına saygı gösterir. Bu nedenle, dikey olarak yönlendirilmiş StackLayout bir alt görünüm içindeki alt görünümler HorizontalOptions özelliklerini , , CenterEndveya Fill alanlarından Startbirine ayarlayabilir. Benzer şekilde, yatay olarak yönlendirilmiş StackLayout bir alt görünüm içindeki alt görünümler, özelliklerini VerticalOptions , , CenterEndveya Fill alanlarından Startbirine ayarlayabilir.

AStackLayout, alt görünümlerde Startyönlendirmeyle aynı yönde StackLayout olan , Center, Endve Fill LayoutOptions alanlarına saygı göstermez. Bu nedenle, dikey olarak yönlendirilmiş StackLayout alanlar alt görünümlerin Startözelliklerinde VerticalOptions ayarlanmışsa , Center, Endveya Fill alanlarını yoksayar. Benzer şekilde, yatay olarak yönlendirilmiş StackLayout alanlar alt görünümlerin Startözelliklerinde HorizontalOptions ayarlanmışsa , Center, Endveya Fill alanlarını yoksayar.

Aşağıdaki XAML kod örneği, her alt öğe özelliğini yapıdaki LayoutOptions dört hizalama alanından birine ayarladığı dikey olarak yönlendirilmiş StackLayout bir örneği HorizontalOptions gösterir:Label

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

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Kod, aşağıdaki ekran görüntülerinde gösterilen düzene neden olur:

Genleşme

Genişletme, bir görünümün içinde daha fazla yer kaplayıp kaplamayacağını (varsa) StackLayoutdenetler. StackLayout kullanılmayan alan içeriyorsa (yani, StackLayout tüm alt öğelerinin birleşik boyutundan büyükse), kullanılmayan alan, genişletme isteğinde bulunan tüm alt görünümler HorizontalOptions tarafından veya VerticalOptions özelliklerini son eki kullanan AndExpand bir LayoutOptions alana ayarlayarak eşit olarak paylaşılır. içindeki StackLayout tüm alan kullanıldığında genişletme seçeneklerinin hiçbir etkisi olmadığını unutmayın.

StackLayout alt görünümleri ancak bulunduğu yönde genişletebilir. Bu nedenle, dikey olarak yönlendirilmiş StackLayout bir, kullanılmayan alan içeriyorsa, özelliklerini , CenterAndExpand, EndAndExpandveya FillAndExpand alanlarından StartAndExpandStackLayout birine ayarlayan VerticalOptions alt görünümleri genişletebilir. Benzer şekilde, yatay olarak yönlendirilmiş StackLayout bir görünüm, kullanılmayan alan içeriyorsa, özelliklerini , CenterAndExpand, EndAndExpandveya FillAndExpand alanlarından StartAndExpandStackLayout birine ayarlayan HorizontalOptions alt görünümleri genişletebilir.

, StackLayout alt görünümleri yönünün tersi yönde genişletemez. Bu nedenle, dikey olarak yönlendirilmiş StackLayoutbir üzerinde, bir alt görünümde StartAndExpand özelliğini olarak ayarlamakHorizontalOptions, özelliğini Startolarak ayarlamakla aynı etkiye sahiptir.

Aşağıdaki XAML kod örneği, her alt öğe özelliğini yapıdaki LayoutOptions dört genişletme alanından birine ayarladığı dikey olarak yönlendirilmiş StackLayout bir örneği VerticalOptions gösterir:Label

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

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Kod, aşağıdaki ekran görüntülerinde gösterilen düzene neden olur:

Her Label biri içinde aynı miktarda alanı kaplar StackLayout. Ancak yalnızca VerticalOptions özelliği FillAndExpand olarak ayarlanmış olan Label öğesinin boyutu farklı olur. Buna ek olarak, her Label biri, kapladığı alanın Label kolayca görüntülenmesini sağlayan küçük bir kırmızı BoxViewile ayrılır.

Özet

Bu makalede, her LayoutOptions yapı değerinin bir görünümün üst öğeye göre hizalaması ve genişlemesi üzerindeki etkisi açıklanmıştır. , , ve alanları, görünümün hizalamasını üst düzende StartAndExpandtanımlamak için, , CenterAndExpand, EndAndExpandve FillAndExpand alanları ise hizalama tercihini tanımlamak ve görünümün varsa StackLayoutiçinde daha fazla alan kaplayıp kaplamayacağını belirlemek için kullanılır.Fill EndCenterStart

İlişkili Bağlantılar

• LayoutOptions