Kılavuz
Örneğe göz atın
.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), Gridalt öğ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.
Grid tablolarla karıştırılmamalıdır ve tablosal veriler sunmayı amaçlamamalıdır. HTML tablolarının aksine, içeriği yerleştirmeye yöneliktir Grid . Tablosal verileri görüntülemek için ListView veya CollectionView kullanmayı göz önünde bulundurun.
Grid sınıfı aşağıdaki özellikleri tanımlar:
Column, türündekiintbir üst Gridgö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 0'dır.ColumnSpan, türündekiint, bir görünümün üst Gridöğ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 üst Gridgö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ınRowDefinitionyü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 0'dır.RowSpan, türündekiintbir görünümün üst Gridöğ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.
Satırlar ve sütunlar
Varsayılan olarak, bir Grid satır ve bir sütun içerir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.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>
Dekont
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 BasicGridPage : ContentPage
{
public BasicGridPage()
{
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 need to be added to the
// Grid to obtain the default row and column settings.
grid.Add(new BoxView
{
Color = Colors.Green
});
grid.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.Add(new BoxView
{
Color = Colors.Blue
}, 1, 0);
grid.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.Add(new BoxView
{
Color = Colors.Teal
}, 0, 1);
grid.Add(new Label
{
Text = "Row 1, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
// This BoxView and Label are in row 1 and column 1, which are specified as arguments
// to the Add method overload.
grid.Add(new BoxView
{
Color = Colors.Purple
}, 1, 1);
grid.Add(new Label
{
Text = "Row1, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
// Row 2
// Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
// and Grid.SetColumn methods. Here, the Grid.SetColumnSpan method is used to span two columns.
BoxView boxView = new BoxView { Color = Colors.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.Add(boxView);
grid.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.
Dekont
Gridayrıca, belirtilen satır ve sütuna belirtilen satır ve sütun aralıklarıyla bir görünüm Grid ekleyen bir AddWithSpan uzantı yöntemi tanımlar.
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. Bunun yerine ve özellikleri, RowDefinitions .NET MAUI'de yerleşik olarak bulunan tür dönüştürücülerinin oluşturduğu RowDefinition ve ColumnDefinition nesneleri içeren virgülle ayrılmış GridUnitType değerler içeren dizelere ColumnDefinitions ayarlanabilir:
<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 ve sütunlar arasında boşluk yoktur. Bu, sırasıyla ve ColumnSpacing özellikleri ayarlanarak RowSpacing değiştirilebilir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.GridSpacingPage"
Title="Grid spacing demo">
<Grid RowSpacing="6"
ColumnSpacing="6">
...
</Grid>
</ContentPage>
Bu örnek, satırları ve sütunları cihazdan bağımsız 6 alan birimiyle ayrılmış olan bir Grid oluşturur:
Bahşiş
hücre içeriğinin RowSpacing örtüşmesi için ve ColumnSpacing özellikleri negatif değerlere ayarlanabilir.
Eşdeğer C# kodu:
public class GridSpacingPage : ContentPage
{
public GridSpacingPage()
{
Grid grid = new Grid
{
RowSpacing = 6,
ColumnSpacing = 6,
...
};
...
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:
StartCenterEndFill
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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.GridAlignmentPage"
Title="Grid alignment demo">
<Grid>
<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 GridAlignmentPage : ContentPage
{
public GridAlignmentPage()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
grid.Add(new BoxView
{
Color = Colors.AliceBlue
});
grid.Add(new Label
{
Text = "Upper left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
});
grid.Add(new BoxView
{
Color = Colors.LightSkyBlue
}, 1, 0);
grid.Add(new Label
{
Text = "Upper center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
}, 1, 0);
grid.Add(new BoxView
{
Color = Colors.CadetBlue
}, 2, 0);
grid.Add(new Label
{
Text = "Upper right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start
}, 2, 0);
// Row 1
grid.Add(new BoxView
{
Color = Colors.CornflowerBlue
}, 0, 1);
grid.Add(new Label
{
Text = "Center left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
grid.Add(new BoxView
{
Color = Colors.DodgerBlue
}, 1, 1);
grid.Add(new Label
{
Text = "Center center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
grid.Add(new BoxView
{
Color = Colors.DarkSlateBlue
}, 2, 1);
grid.Add(new Label
{
Text = "Center right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
}, 2, 1);
// Row 2
grid.Add(new BoxView
{
Color = Colors.SteelBlue
}, 0, 2);
grid.Add(new Label
{
Text = "Lower left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.End
}, 0, 2);
grid.Add(new BoxView
{
Color = Colors.LightBlue
}, 1, 2);
grid.Add(new Label
{
Text = "Lower center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.End
}, 1, 2);
grid.Add(new BoxView
{
Color = Colors.BlueViolet
}, 2, 2);
grid.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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.XAML.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 Height="500" />
<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 , 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, performansı etkileyebilecek daha fazla düzen hesaplaması yapılır. Daha fazla bilgi için bkz . Doğru düzeni seçme.
Eşdeğer C# kodu:
public class ColorSlidersGridPage : ContentPage
{
BoxView boxView;
Slider redSlider;
Slider greenSlider;
Slider blueSlider;
public ColorSlidersGridPage()
{
// 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 { HeightRequest = 500 },
new RowDefinition()
}
};
boxView = new BoxView { Color = Colors.Black };
rootGrid.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.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.Add(redLabel);
greenSlider = new Slider();
greenSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(greenSlider, 2);
childGrid.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.Add(greenLabel);
blueSlider = new Slider();
blueSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(blueSlider, 4);
childGrid.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.Add(blueLabel);
// Place the child Grid in the root Grid
rootGrid.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);
}
}
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin