düzen seçenekleri Xamarin.Forms

Örneği indirme

Her Xamarin.Forms görünümde LayoutOptions türünde HorizontalOptions ve VerticalOptions özellikleri vardır. Bu makalede her LayoutOptions değerinin bir görünümün hizalama ve genişletmesi üzerindeki etkisi açıklanmıştır.

Genel Bakış

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

• Hizalama: görünümün tercih edilen hizalaması, üst düzenin içindeki konumunu ve boyutunu belirler.
• Genişletme: yalnızca bir tarafından kullanılır ve görünümün varsa fazladan alan kullanması gerektiğini gösterir.

Bu düzen View tercihleri, Xamarin_Forms View _View_HorizontalOptions" data-linktype="absolute-path">veya HorizontalOptions Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsViewLayoutOptions özelliğinin yapısından genel alanlardan biri olarak ayar kullanarak üst öğesiyle göreli olarak bir düzenine uygulanabilir. Genel alanlar aşağıdaki gibidir:

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

Start, Center , ve EndFill alanları, görünümün üst düzen içindeki hizalamasını tanımlamak için kullanılır:

• Yatay hizalama için, üst düzenin sol tarafına, dikey hizalama için ise üst düzenin StartView en üstüne View konumlar.
• Yatay ve dikey hizalama için, Center yatay veya dikey olarak ortalar. View
• Yatay hizalama için, üst düzenin sağ tarafına, dikey hizalama için ise üst düzenin en altına EndViewView konumlar.
• Yatay hizalama için üst düzenin genişliğini doldurmasını ve dikey hizalama için üst düzenin yüksekliğini FillViewView doldurmasını sağlar.

, , ve değerleri hizalama tercihini tanımlamak ve üst öğesi içinde kullanılabilirse görünümün daha fazla alan kaplayacak StartAndExpand olup olmadığını tanımlamak için CenterAndExpandEndAndExpandFillAndExpandStackLayout kullanılır.

Hizalama

Hizalama, üst düzen kullanılmayan alan içerdiğinde (üst düzen tüm alt düzenin birleşik boyutundan büyük olduğunda) bir görünümün üst düzenin içinde nasıl konumlanmasına bakarak kontrol eder.

Bir StackLayout yalnızca, StartCenter yönlendirmenin ters yönünde olan alt görünümlerde , , End ve FillLayoutOptions alanlarına uyum StackLayout sağlar. Bu nedenle, dikey olarak yönlendirilen bir içindeki alt görünümler Xamarin_Forms StackLayoutStackLayout _View_HorizontalOptions" data-linktype="absolute-path">özelliklerini , , veya alanlarından HorizontalOptions biri Start olarak CenterEndFill ayarlayın. Benzer şekilde, yatay olarak yönlendirilen bir içindeki alt StackLayout görünümler Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">özelliklerini , VerticalOptionsStartCenterEnd , Fill veya alanlarından biri olarak ayarlayın.

, StackLayout , ve alt StartCenter görünümlerde yönlendirmeyle aynı yönde olan alanlara saygı EndFillLayoutOptionsStackLayout göstermez. Bu nedenle, dikey olarak yönlendiren bir , StackLayout , veya alanları Xamarin_Forms StartCenterEndFillStackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions alt görünümlerin özelliklerini yoksayar. Benzer şekilde, yatay olarak yönlendiren bir , StackLayout , veya alanları Xamarin_Forms StartCenterEndFillStackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions alt görünümlerin özelliklerini yoksayar.

Aşağıdaki XAML kod örneği, her alt alt kümenin StackLayoutLabel Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">özelliğini HorizontalOptions yapıdan dört hizalama alanından biri olarak ayar bulunduğu dikey olarak yönlendirilen bir örneği LayoutOptions gösterir:

<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üsinde gösterilen düzenle sonuç verir:

Genişleme

Genişletme, bir görünümün varsa içinde daha fazla alan kaplayacak olup olmadığını kontrol StackLayout eder. kullanılmayan alan içeriyorsa (yani , tüm altlarının birleşik boyutundan büyükse), kullanılmayan alan genişleme isteğinde bulunan tüm alt görünümler tarafından eşit olarak paylaşılır ve StackLayoutStackLayout bunların Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">veya Xamarin_Forms HorizontalOptionsStackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsLayoutOptionsAndExpand özellikleri son eki kullanan bir alana ayarlandı. içinde tüm alan StackLayout kullanılırken 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önlendirilen bir alt görünümleri genişletip Xamarin_Forms StackLayoutStackLayout _View_VerticalOptions" data-linktype="absolute-path">özelliklerini, , veya alanlarından biri olarak (kullanılmayan alan VerticalOptionsStartAndExpandCenterAndExpandEndAndExpand içeriyorsa) FillAndExpandStackLayout genişletebilirsiniz. Benzer şekilde, yatay olarak yönlendirilen bir kullanıcı, StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">özelliklerini , , veya alanlarından biri olarak ayaran alt görünümleri HorizontalOptionsStartAndExpand genişletebilirsiniz CenterAndExpandEndAndExpandFillAndExpandStackLayout ( kullanılmayan alan içeriyorsa).

Bir, StackLayout alt görünümleri yönünün tersi yönde genişletebilirsiniz. Bu nedenle, dikey olarak yönlendirilen bir üzerinde, alt görünümde StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">özelliğini olarak ayarlamanın aynı etkisi HorizontalOptionsStartAndExpandStart vardır.

Aşağıdaki XAML kod örneği, her alt alt kümenin StackLayoutLabel Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">özelliğini VerticalOptions yapıdan dört genişletme alanından biri olarak ayar bulunduğu dikey olarak yönlendirilen bir örneği LayoutOptions gösterir:

<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üsinde gösterilen düzenle sonuç verir:

Her Label biri içinde aynı miktarda alan kaplar. StackLayout Ancak, yalnızca son olan , Xamarin_Forms LabelLabel _View_VerticalOptions" data-linktype="absolute-path">özelliğini farklı VerticalOptions bir FillAndExpand boyuta sahip olacak şekilde ayarlar. Ayrıca, her Label biri kapladığı alanı kolayca BoxView görüntülemenizi sağlayan küçük bir kırmızı ile Label ayrılır.

Özet

Bu makalede her yapı değerinin, üst öğeye göre bir görünümün hizalama ve LayoutOptions genişletmesi üzerindeki etkisi açıklanmıştır. , , ve alanları, görünümün üst düzen içindeki hizalamasını tanımlamak için kullanılır ve , , ve alanları hizalama tercihini tanımlamak ve varsa bir içinde daha fazla alan kaplayacak olup olmadığını belirlemek için StartCenterEndFillStartAndExpandCenterAndExpandEndAndExpandFillAndExpandStackLayout kullanılır.

İlişkili Bağlantılar

• LayoutOptions (örnek)
• LayoutOptions