Xamarin.Forms Kılavuz
Grid, alt öğelerini orantılı veya mutlak boyutlara sahip olabilecek satırlar ve sütunlar halinde düzenleyen bir düzendir. Grid varsayılan olarak bir satır ve bir sütun içerir. Ayrıca, diğer Grid alt düzenleri içeren bir üst düzen olarak da kullanılabilir.
Düzen Grid tablolarla karıştırılmamalıdır ve tablosal verileri sunmak için tasarlanmamıştır. HTML tablolarının aksine, içeriği yerleştirmeye yöneliktir Grid . Tablosal verileri görüntülemek için ListView, CollectionView veya TableView kullanmayı göz önünde bulundurun.
Grid sınıfı aşağıdaki özellikleri tanımlar:
Column, türündekiintbir üstGridgörünümdeki bir görünümün sütun hizalamasını gösteren ekli bir özelliktir. Bu özelliğin varsayılan değeri 0'dır. Doğrulama geri çağırma özelliği ayarlandığında değerinin 0'dan büyük veya buna eşit olmasını sağlar.ColumnDefinitions, türündekiColumnDefinitionCollection, kılavuz sütunlarınınColumnDefinitiongenişliğini tanımlayan nesnelerin listesidir.ColumnSpacing, türündekidoublekılavuz sütunları arasındaki uzaklığı gösterir. Bu özelliğin varsayılan değeri 6 cihazdan bağımsız birimdir.ColumnSpan, türündekiint, bir görünümün üstGridöğe içinde yayıldığı toplam sütun sayısını gösteren ekli bir özelliktir. Bu özelliğin varsayılan değeri 1'dir. Doğrulama geri çağırma özelliği ayarlandığında değerinin 1'den büyük veya buna eşit olmasını sağlar.Row, türündekiintbir üstGridgörünümdeki bir görünümün satır hizalamasını gösteren ekli bir özelliktir. Bu özelliğin varsayılan değeri 0'dır. Doğrulama geri çağırma özelliği ayarlandığında değerinin 0'dan büyük veya buna eşit olmasını sağlar.RowDefinitions, türündeRowDefinitionCollection, kılavuz satırlarınınRowDefintionyüksekliğini tanımlayan nesnelerin listesidir.RowSpacing, türündekidoublekılavuz satırları arasındaki uzaklığı gösterir. Bu özelliğin varsayılan değeri 6 cihazdan bağımsız birimdir.RowSpan, türündekiintbir görünümün üstGridöğe içinde yayıldığı toplam satır sayısını gösteren ekli bir özelliktir. Bu özelliğin varsayılan değeri 1'dir. Doğrulama geri çağırma özelliği ayarlandığında değerinin 1'den büyük veya buna eşit olmasını sağlar.
Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.
sınıfı Grid türünde bir Children özelliği tanımlayan sınıfından IList<T>türetilirLayout<T>. Children özelliği sınıfının özelliğidir ContentPropertyLayout<T> ve bu nedenle açıkça XAML'den ayarlanması gerekmez.
İpucu
Mümkün olan en iyi düzen performansını elde etmek için Düzen performansını iyileştirme yönergelerini izleyin.
Satırlar ve sütunlar
Varsayılan olarak, bir Grid satır ve bir sütun içerir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridTutorial.MainPage">
<Grid Margin="20,35,20,20">
<Label Text="By default, a Grid contains one row and one column." />
</Grid>
</ContentPage>
Bu örnekte , Grid otomatik olarak tek bir konuma konumlandırılan tek bir alt öğe Label içerir:
düzeninin Grid davranışı, sırasıyla ve ColumnDefinitions nesnelerinin RowDefinitionsRowDefinition koleksiyonları olan ve ColumnDefinition özellikleriyle tanımlanabilir. Bu koleksiyonlar bir Gridöğesinin satır ve sütun özelliklerini tanımlar ve içindeki her satır Gridiçin bir RowDefinition nesne ve içindeki her sütun Gridiçin bir ColumnDefinition nesne içermelidir.
RowDefinition sınıfı türünde GridLengthbir Height özellik tanımlar ve ColumnDefinition sınıfı türünde bir Width özellik GridLengthtanımlar. Yapısı GridLength , üç üyesi olan numaralandırma açısından GridUnitType bir satır yüksekliği veya sütun genişliği belirtir:
Absolute– satır yüksekliği veya sütun genişliği, cihazdan bağımsız birimlerdeki bir değerdir (XAML'deki bir sayı).Auto– satır yüksekliği veya sütun genişliği hücre içeriğineAuto(XAML'de) göre otomatikleştirilir.Star– kalan satır yüksekliği veya sütun genişliği orantılı olarak ayrılır (XAML'de bunu izleyen*bir sayı).
Grid özelliğine Auto sahip bir Height satır, bu satırdaki görünümlerin yüksekliğini dikey StackLayoutile aynı şekilde kısıtlar. Benzer şekilde, özelliğine Auto sahip bir Width sütun yatay StackLayoutgibi çalışır.
Dikkat
Mümkün olduğunca az satır ve sütunun boyuta Auto ayarlandığından emin olmaya çalışın. Otomatik boyutlandırılmış her satır veya sütun, düzen altyapısının ek düzen hesaplamaları gerçekleştirmesine neden olur. Bunun yerine, mümkünse sabit boyutlu satırlar ve sütunlar kullanın. Alternatif olarak, sabit listesi değeriyle GridUnitType.Star orantılı miktarda alan kaplayan satırlar ve sütunlar ayarlayın.
Aşağıdaki XAML'de üç satır ve iki sütun ile nasıl Grid oluşturulacağı gösterilmektedir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
</Grid>
</ContentPage>
Bu örnekte, öğesinin Grid toplam yüksekliği sayfanın yüksekliğidir. üçüncü Grid satırın yüksekliğinin cihazdan bağımsız 100 birim olduğunu bilir. Bu yüksekliği kendi yüksekliğinden çıkarır ve kalan yüksekliği yıldızdan önceki sayıya göre birinci ve ikinci satırlar arasında orantılı olarak ayırır. Bu örnekte, ilk satırın yüksekliği ikinci satırın iki katıdır.
İki ColumnDefinition nesnenin her ikisi de öğesini olarak ayarlar Width*1*. Bu, ekranın genişliğinin iki sütunun altına eşit olarak bölündüğü anlamına gelir.
Önemli
özelliğinin RowDefinition.Height varsayılan değeridir *. Benzer şekilde, özelliğinin varsayılan değeri ColumnDefinition.Width şeklindedir *. Bu nedenle, bu varsayılanların kabul edilebilir olduğu durumlarda bu özelliklerin ayarlanması gerekmez.
Alt görünümler ve Grid.Row ekli özelliklere sahip Grid.Column belirli Grid hücrelerde konumlandırılabilir. Ayrıca, alt görünümlerin birden çok satır ve sütuna yayılmasını sağlamak için ve Grid.ColumnSpan ekli özelliklerini kullanınGrid.RowSpan.
Aşağıdaki XAML aynı Grid tanımı gösterir ve ayrıca alt görünümleri belirli Grid hücrelerde konumlandırr:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="Green" />
<Label Text="Row 0, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Column="1"
Color="Blue" />
<Label Grid.Column="1"
Text="Row 0, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Color="Teal" />
<Label Grid.Row="1"
Text="Row 1, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="Purple" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Row1, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.ColumnSpan="2"
Color="Red" />
<Label Grid.Row="2"
Grid.ColumnSpan="2"
Text="Row 2, Columns 0 and 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</ContentPage>
Not
Grid.Row ve Grid.Column özelliklerinin her ikisi de 0'dan dizinlenir ve bu nedenle Grid.Row="2" üçüncü satıra, ikinci sütuna ise Grid.Column="1" başvurur. Buna ek olarak, bu özelliklerin her ikisi de varsayılan 0 değerine sahiptir ve bu nedenle bir öğesinin ilk satırını veya ilk sütununu Gridkaplayan alt görünümlerde ayarlanması gerekmez.
Bu örnekte, üç Grid satırın tümü ve Label görünümleri tarafından BoxView işgal edilir. Üçüncü satır 100 cihazdan bağımsız birimdir ve ilk iki satır kalan alanı kaplar (ilk satır ikinci satırdan iki kat daha yüksektir). İki sütun genişlikte eşittir ve ikiye Grid bölün. BoxView Üçüncü satırdaki her iki sütuna da yayılmıştır.
Ayrıca, içindeki Grid alt görünümler hücreleri paylaşabilir. Çocukların XAML'de görünme sırası, çocukların içine Gridyerleştirildiği sıradır. Önceki örnekte, Label nesneler yalnızca nesnelerin üzerinde BoxView işlendiği için görünür durumdadır. Label Nesneler üzerinde işlenirse BoxView nesneler görünmez.
Eşdeğer C# kodu:
public class BasicGridPageCS : ContentPage
{
public BasicGridPageCS()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
new RowDefinition(),
new RowDefinition { Height = new GridLength(100) }
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
// The BoxView and Label are in row 0 and column 0, and so only needs to be added to the
// Grid.Children collection to get default row and column settings.
grid.Children.Add(new BoxView
{
Color = Color.Green
});
grid.Children.Add(new Label
{
Text = "Row 0, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
});
// This BoxView and Label are in row 0 and column 1, which are specified as arguments
// to the Add method.
grid.Children.Add(new BoxView
{
Color = Color.Blue
}, 1, 0);
grid.Children.Add(new Label
{
Text = "Row 0, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 0);
// Row 1
// This BoxView and Label are in row 1 and column 0, which are specified as arguments
// to the Add method overload.
grid.Children.Add(new BoxView
{
Color = Color.Teal
}, 0, 1, 1, 2);
grid.Children.Add(new Label
{
Text = "Row 1, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 0, 1, 1, 2); // These arguments indicate that that the child element goes in the column starting at 0 but ending before 1.
// They also indicate that the child element goes in the row starting at 1 but ending before 2.
grid.Children.Add(new BoxView
{
Color = Color.Purple
}, 1, 2, 1, 2);
grid.Children.Add(new Label
{
Text = "Row1, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 2, 1, 2);
// Row 2
// Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
// and Grid.SetColumn methods.
BoxView boxView = new BoxView { Color = Color.Red };
Grid.SetRow(boxView, 2);
Grid.SetColumnSpan(boxView, 2);
Label label = new Label
{
Text = "Row 2, Column 0 and 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Grid.SetRow(label, 2);
Grid.SetColumnSpan(label, 2);
grid.Children.Add(boxView);
grid.Children.Add(label);
Title = "Basic Grid demo";
Content = grid;
}
}
Kodda, bir nesnenin yüksekliğini ve bir RowDefinitionColumnDefinition nesnenin genişliğini belirtmek için yapı değerlerini GridLength genellikle numaralandırmayla GridUnitType birlikte kullanırsınız.
Yukarıdaki örnek kod, öğesine alt öğe Grideklemeye ve bulundukları hücreleri belirtmeye yönelik birkaç farklı yaklaşım da gösterir. Sol, sağ, üst ve alt bağımsız değişkenleri belirten aşırı yükleme kullanılırkenAdd, sol ve üst bağımsız değişkenler her zaman içindeki Gridhücrelere başvururken, sağ ve alt bağımsız değişkenler dışındaki Gridhücrelere başvuruda bulunur. Bunun nedeni, sağ bağımsız değişkenin her zaman sol bağımsız değişkenden büyük olması ve alttaki bağımsız değişkenin her zaman en üstteki bağımsız değişkenden büyük olması gerekir. 2x2 Gridolduğunu varsayan aşağıdaki örnek, her iki Add aşırı yüklemeyi de kullanan eşdeğer kodu gösterir:
// left, top
grid.Children.Add(topLeft, 0, 0); // first column, first row
grid.Children.Add(topRight, 1, 0); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1); // first column, second row
grid.Children.Add(bottomRight, 1, 1); // second column, second row
// left, right, top, bottom
grid.Children.Add(topLeft, 0, 1, 0, 1); // first column, first row
grid.Children.Add(topRight, 1, 2, 0, 1); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1, 1, 2); // first column, second row
grid.Children.Add(bottomRight, 1, 2, 1, 2); // second column, second row
Not
Buna ek olarak, alt görünümler ile ve yöntemlerine AddVerticalAddHorizontal eklenebilir Grid ve bu da alt öğeleri tek bir satıra veya tek bir sütuna Gridekler. Grid ardından, bu çağrılar yapıldıktan sonra satırlar veya sütunlar halinde genişletilir ve alt öğeleri otomatik olarak doğru hücrelere yerleştirir.
Satır ve sütun tanımlarını basitleştirme
XAML'de, bir öğesinin Grid satır ve sütun özellikleri, her satır ve sütun için ve ColumnDefinition nesnelerini tanımlamak RowDefinition zorunda kalmamak için basitleştirilmiş bir söz dizimi kullanılarak belirtilebilir. RowDefinitions Bunun yerine, ve ColumnDefinitions özellikleri virgülle ayrılmış GridUnitType değerler içeren dizelere ayarlanabilir ve bu dizelerden tür dönüştürücüleri oluşturma RowDefinition ve ColumnDefinition nesnelere yerleşik Xamarin.Forms olarak bulunur:
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
Bu örnekte, beş Grid satır ve dört sütun vardır. Üçüncü, ileri ve beşinci satırlar mutlak yüksekliklere ayarlanır ve ikinci satır içeriğine otomatik olarak boyutlandırılır. Kalan yükseklik daha sonra ilk satıra ayrılır.
İlerideki sütun, üçüncü sütunun içeriğine otomatik olarak boyutlandırılmasıyla mutlak genişliğe ayarlanır. Kalan genişlik, yıldızdan önceki sayıya göre birinci ve ikinci sütunlar arasında orantılı olarak ayrılır. Bu örnekte, ikinci sütunun genişliği ilk sütunun iki katıdır (çünkü * ile aynıdır 1*).
Satırlar ve sütunlar arasında boşluk
Varsayılan olarak, Grid satırlar cihazdan bağımsız 6 alan birimiyle ayrılır. Benzer şekilde, Grid sütunlar cihazdan bağımsız 6 alan birimiyle ayrılır. Bu varsayılanlar sırasıyla ve ColumnSpacing özellikleri ayarlanarak RowSpacing değiştirilebilir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridSpacingPage"
Title="Grid spacing demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
..
</Grid>
</ContentPage>
Bu örnek, satırları ve sütunları arasında boşluk olmayan bir Grid oluşturur:
İpucu
hücre içeriğinin RowSpacing örtüşmesi için ve ColumnSpacing özellikleri negatif değerlere ayarlanabilir.
Eşdeğer C# kodu:
public GridSpacingPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
// ...
};
// ...
Content = grid;
}
Hizalama
içindeki Grid alt görünümler ve VerticalOptions özelliklerine göre HorizontalOptions hücreleri içinde konumlandırılabilir. Bu özellikler, yapısından LayoutOptions aşağıdaki alanlara ayarlanabilir:
Önemli
AndExpands Yapıdaki LayoutOptions alanlar yalnızca nesneler için StackLayout geçerlidir.
Aşağıdaki XAML, dokuz eşit boyutlu hücre içeren bir Grid oluşturur ve her hücreye farklı bir hizalamayla bir Label yerleştirir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridAlignmentPage"
Title="Grid alignment demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="AliceBlue" />
<Label Text="Upper left"
HorizontalOptions="Start"
VerticalOptions="Start" />
<BoxView Grid.Column="1"
Color="LightSkyBlue" />
<Label Grid.Column="1"
Text="Upper center"
HorizontalOptions="Center"
VerticalOptions="Start"/>
<BoxView Grid.Column="2"
Color="CadetBlue" />
<Label Grid.Column="2"
Text="Upper right"
HorizontalOptions="End"
VerticalOptions="Start" />
<BoxView Grid.Row="1"
Color="CornflowerBlue" />
<Label Grid.Row="1"
Text="Center left"
HorizontalOptions="Start"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Center center"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="2"
Text="Center right"
HorizontalOptions="End"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Color="SteelBlue" />
<Label Grid.Row="2"
Text="Lower left"
HorizontalOptions="Start"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="1"
Color="LightBlue" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Lower center"
HorizontalOptions="Center"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="2"
Color="BlueViolet" />
<Label Grid.Row="2"
Grid.Column="2"
Text="Lower right"
HorizontalOptions="End"
VerticalOptions="End" />
</Grid>
</ContentPage>
Bu örnekte, her satırdaki Label nesnelerin tümü aynı şekilde dikey olarak hizalanır, ancak farklı yatay hizalamalar kullanır. Alternatif olarak, bu durum her sütundaki nesnelerin yatay olarak aynı hizalandığı, ancak farklı dikey hizalamaların kullanıldığı düşünülebilir Label :
Eşdeğer C# kodu:
public class GridAlignmentPageCS : ContentPage
{
public GridAlignmentPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
grid.Children.Add(new BoxView
{
Color = Color.AliceBlue
});
grid.Children.Add(new Label
{
Text = "Upper left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
});
grid.Children.Add(new BoxView
{
Color = Color.LightSkyBlue
}, 1, 0);
grid.Children.Add(new Label
{
Text = "Upper center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
}, 1, 0);
grid.Children.Add(new BoxView
{
Color = Color.CadetBlue
}, 2, 0);
grid.Children.Add(new Label
{
Text = "Upper right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start
}, 2, 0);
// Row 1
grid.Children.Add(new BoxView
{
Color = Color.CornflowerBlue
}, 0, 1);
grid.Children.Add(new Label
{
Text = "Center left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
grid.Children.Add(new BoxView
{
Color = Color.DodgerBlue
}, 1, 1);
grid.Children.Add(new Label
{
Text = "Center center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
grid.Children.Add(new BoxView
{
Color = Color.DarkSlateBlue
}, 2, 1);
grid.Children.Add(new Label
{
Text = "Center right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
}, 2, 1);
// Row 2
grid.Children.Add(new BoxView
{
Color = Color.SteelBlue
}, 0, 2);
grid.Children.Add(new Label
{
Text = "Lower left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.End
}, 0, 2);
grid.Children.Add(new BoxView
{
Color = Color.LightBlue
}, 1, 2);
grid.Children.Add(new Label
{
Text = "Lower center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.End
}, 1, 2);
grid.Children.Add(new BoxView
{
Color = Color.BlueViolet
}, 2, 2);
grid.Children.Add(new Label
{
Text = "Lower right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.End
}, 2, 2);
Title = "Grid alignment demo";
Content = grid;
}
}
İç İçe Kılavuz nesneleri
, Grid iç içe alt nesneleri veya diğer alt Grid düzenleri içeren bir üst düzen olarak kullanılabilir. Nesneleri iç içe yerleştirirken Grid , Grid.Row, Grid.Column, Grid.RowSpanve Grid.ColumnSpan ekli özellikleri her zaman üst Gridgörünümlerinin içindeki görünümlerin konumuna başvurur.
Aşağıdaki XAML iç içe Grid nesne örneği gösterir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.ColorSlidersGridPage"
Title="Nested Grids demo">
<ContentPage.Resources>
<converters:DoubleToIntConverter x:Key="doubleToInt" />
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment"
Value="Center" />
</Style>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView x:Name="boxView"
Color="Black" />
<Grid Grid.Row="1"
Margin="20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Slider x:Name="redSlider"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="1"
Text="{Binding Source={x:Reference redSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Red = {0}'}" />
<Slider x:Name="greenSlider"
Grid.Row="2"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="3"
Text="{Binding Source={x:Reference greenSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Green = {0}'}" />
<Slider x:Name="blueSlider"
Grid.Row="4"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="5"
Text="{Binding Source={x:Reference blueSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Blue = {0}'}" />
</Grid>
</Grid>
</ContentPage>
Bu örnekte, kök Grid düzeni ilk satırında bir BoxView , ikinci satırında bir alt Grid öğe içerir. Alt öğeGrid, tarafından BoxViewgörüntülenen rengi işleyen nesneler ve Label her Sliderbirinin değerini görüntüleyen nesneler içerirSlider:
Önemli
Nesneleri ve diğer düzenleri ne kadar derin iç içe Grid yerleştirdiyseniz, iç içe yerleştirilmiş düzenler performansı o kadar fazla etkiler. Daha fazla bilgi için bkz . Doğru düzeni seçme.
Eşdeğer C# kodu:
public class ColorSlidersGridPageCS : ContentPage
{
BoxView boxView;
Slider redSlider;
Slider greenSlider;
Slider blueSlider;
public ColorSlidersGridPageCS()
{
// Create an implicit style for the Labels
Style labelStyle = new Style(typeof(Label))
{
Setters =
{
new Setter { Property = Label.HorizontalTextAlignmentProperty, Value = TextAlignment.Center }
}
};
Resources.Add(labelStyle);
// Root page layout
Grid rootGrid = new Grid
{
RowDefinitions =
{
new RowDefinition(),
new RowDefinition()
}
};
boxView = new BoxView { Color = Color.Black };
rootGrid.Children.Add(boxView);
// Child page layout
Grid childGrid = new Grid
{
Margin = new Thickness(20),
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
}
};
DoubleToIntConverter doubleToInt = new DoubleToIntConverter();
redSlider = new Slider();
redSlider.ValueChanged += OnSliderValueChanged;
childGrid.Children.Add(redSlider);
Label redLabel = new Label();
redLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Red = {0}", source: redSlider));
Grid.SetRow(redLabel, 1);
childGrid.Children.Add(redLabel);
greenSlider = new Slider();
greenSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(greenSlider, 2);
childGrid.Children.Add(greenSlider);
Label greenLabel = new Label();
greenLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Green = {0}", source: greenSlider));
Grid.SetRow(greenLabel, 3);
childGrid.Children.Add(greenLabel);
blueSlider = new Slider();
blueSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(blueSlider, 4);
childGrid.Children.Add(blueSlider);
Label blueLabel = new Label();
blueLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Blue = {0}", source: blueSlider));
Grid.SetRow(blueLabel, 5);
childGrid.Children.Add(blueLabel);
// Place the child Grid in the root Grid
rootGrid.Children.Add(childGrid, 0, 1);
Title = "Nested Grids demo";
Content = rootGrid;
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
boxView.Color = new Color(redSlider.Value, greenSlider.Value, blueSlider.Value);
}
}