Kısa cevap
Start, Center, EndVe Fillgörünümün tanımlamak kendi alanı içinde hizalama .
Expandmevcutsa daha fazla yer kaplayıp kaplamadığını tanımlar .
teori
Yapı LayoutOptionsiki farklı davranışı kontrol eder:
Hizalama: Görünüm, üst görünümde nasıl hizalanır?
Start: Dikey hizalama için görünüm en üste taşınır. Yatay hizalama için bu genellikle sol taraftır. (Ancak, sağdan sola dil ayarına sahip cihazlarda bunun başka bir yol olduğunu, yani sağa hizalandığını unutmayın.)Center: Görünüm ortalanmıştır.End: Genellikle görünüm aşağı veya sağa hizalanır. (Sağdan sola yazılan dillerde, elbette, sola hizalı.)Fill: Bu hizalama biraz farklıdır. Görünüm, üst görünümün tam boyutuna uzanır.
Bununla birlikte, ebeveyn çocuklarından daha büyük değilse, bu hizalamalar arasında herhangi bir fark görmezsiniz. Hizalama, yalnızca ek alan bulunan üst görünümler için önemlidir.
Genişleme: Eleman varsa daha fazla yer kaplar mı?
- Sonek
Expand: Üst görünüm, tüm çocuklarının birleştirilmiş boyutundan daha büyükse, yani ek alan varsa, bu alan, bu sonekle alt görünümler arasında oranlanır. Bu çocuklar alanlarını "işgal edecek", ancak mutlaka "doldurmayacak". Aşağıdaki örnekte bu davranışa bir göz atacağız.
- Sonek yok: Son
Expandeki olmayan çocuklar , daha fazla yer olsa bile ek alan elde etmez.
Yine, ebeveyn görüşü çocuklarından daha büyük değilse, genişleme soneki de herhangi bir fark yaratmaz.
Misal
Sekiz düzen seçeneğinin tümü arasındaki farkı görmek için aşağıdaki örneğe bakalım.
Uygulama StackLayout, her biri dikey düzen seçeneğiyle etiketlenmiş sekiz iç içe beyaz düğmeli koyu gri içerir . Düğmelerden birine tıklandığında, dikey düzen seçeneğini yığın düzenine atar. Bu şekilde, görünümlerin her ikisi de farklı düzen seçeneği ile ebeveynlerle etkileşimini kolayca test edebiliriz.
(Son birkaç kod satırı ek sarı kutular ekler. Biraz sonra buna geri döneceğiz.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
Aşağıdaki ekran görüntüleri, sekiz düğmenin her birine tıklandığında sonucu gösterir. Aşağıdaki gözlemleri yapıyoruz:
- Üst
stackLayoutöğe sıkı olduğu sürece ( Fillsayfa değil ), her birinin dikey düzen seçeneği Buttongöz ardı edilebilir.
- Dikey mizanpaj seçeneği yalnızca
stackLayout, daha büyükse (örn. FillHizalama yoluyla ) ve ayrı düğmelerin Expandsoneki varsa önemlidir .
- Ek alan,
Expandsonek içeren tüm düğmeler arasında açıkça orantılıdır . Bunu daha net görmek için, her iki komşu düğmeye arasına sarı yatay çizgiler ekledik.
- İstenilen yüksekliklerinden daha fazla alana sahip düğmeler mutlaka "doldurmaz". Bu durumda, fiili davranış hizalanmalarıyla kontrol edilir. Örneğin, boşluklarının üstüne, ortasına veya düğmesine hizalanır veya tamamen doldururlar.
- Tüm düğmeler mizanpajın tüm genişliği boyunca uzanır, çünkü yalnızca
VerticalOptions.
Burada karşılık gelen yüksek çözünürlüklü ekran görüntülerini bulabilirsiniz.
