Kisi
.NET Multi-platform App UI (.NET MAUI) Grid, adalah tata letak yang mengatur turunannya ke dalam baris dan kolom, yang dapat memiliki ukuran proporsional atau absolut. Secara default, berisi Grid satu baris dan satu kolom. Selain itu, Grid dapat digunakan sebagai tata letak induk yang berisi tata letak anak lainnya.
Grid seharusnya tidak dikacaukan dengan tabel, dan tidak dimaksudkan untuk menyajikan data tabular. Tidak seperti tabel HTML, Grid ditujukan untuk meletakkan konten. Untuk menampilkan data tabular, pertimbangkan untuk menggunakan ListView atau CollectionView.
Kelas Grid menentukan properti berikut:
Column
, dari jenisint
, yang merupakan properti terlampir yang menunjukkan perataan kolom tampilan dalam induk Grid. Nilai default properti ini adalah 0. Panggilan balik validasi memastikan bahwa ketika properti diatur, nilainya lebih besar dari atau sama dengan 0.ColumnDefinitions
, dari jenisColumnDefinitionCollection
, adalah daftarColumnDefinition
objek yang menentukan lebar kolom kisi.ColumnSpacing
, dari jenisdouble
, menunjukkan jarak antara kolom kisi. Nilai default properti ini adalah 0.ColumnSpan
, dari jenisint
, yang merupakan properti terlampir yang menunjukkan jumlah total kolom yang mencakup tampilan dalam induk Grid. Nilai default properti ini adalah 1. Panggilan balik validasi memastikan bahwa ketika properti diatur, nilainya lebih besar dari atau sama dengan 1.Row
, dari jenisint
, yang merupakan properti terlampir yang menunjukkan perataan baris tampilan dalam induk Grid. Nilai default properti ini adalah 0. Panggilan balik validasi memastikan bahwa ketika properti diatur, nilainya lebih besar dari atau sama dengan 0.RowDefinitions
, dari jenisRowDefinitionCollection
, adalah daftarRowDefinition
objek yang menentukan tinggi baris kisi.RowSpacing
, dari jenisdouble
, menunjukkan jarak antara baris kisi. Nilai default properti ini adalah 0.RowSpan
, dari jenisint
, yang merupakan properti terlampir yang menunjukkan jumlah total baris yang mencakup tampilan dalam induk Grid. Nilai default properti ini adalah 1. Panggilan balik validasi memastikan bahwa ketika properti diatur, nilainya lebih besar dari atau sama dengan 1.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data dan ditata.
Baris dan kolom
Secara default, berisi Grid satu baris dan satu kolom:
<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>
Dalam contoh ini, Grid berisi satu anak Label yang secara otomatis diposisikan dalam satu lokasi:
Perilaku Grid tata letak dapat didefinisikan dengan RowDefinitions
properti dan ColumnDefinitions
, yang masing-masing merupakan kumpulan RowDefinition
objek dan ColumnDefinition
. Koleksi ini menentukan karakteristik baris dan kolom dari Grid, dan harus berisi satu RowDefinition
objek untuk setiap baris di Grid, dan satu ColumnDefinition
objek untuk setiap kolom di Grid.
Kelas RowDefinition
mendefinisikan Height
properti, jenis GridLength
, dan ColumnDefinition
kelas mendefinisikan Width
properti, dari jenis GridLength
. Struktur GridLength
menentukan tinggi baris atau lebar kolom dalam hal GridUnitType
enumerasi, yang memiliki tiga anggota:
Absolute
– tinggi baris atau lebar kolom adalah nilai dalam unit independen perangkat (angka dalam XAML).Auto
– tinggi baris atau lebar kolom diotomatiskan berdasarkan konten sel (Auto
dalam XAML).Star
– tinggi baris sisa atau lebar kolom dialokasikan secara proporsional (angka diikuti dengan*
di XAML).
Baris Grid dengan properti Auto
membatasi tinggi tampilan dalam baris tersebut dengan Height
cara yang sama seperti vertikal StackLayout. Demikian pula, kolom dengan Width
properti Auto
karya seperti horizontal StackLayout.
Perhatian
Cobalah untuk memastikan bahwa baris dan kolom sesederh mungkin diatur ke Auto
ukuran. Setiap baris atau kolom berukuran otomatis akan menyebabkan mesin tata letak melakukan perhitungan tata letak tambahan. Sebagai gantinya, gunakan baris dan kolom ukuran tetap jika memungkinkan. Atau, atur baris dan kolom untuk menempati jumlah ruang proporsional dengan GridUnitType.Star
nilai enumerasi.
XAML berikut menunjukkan cara membuat Grid dengan tiga baris dan dua kolom:
<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>
Dalam contoh ini, Grid memiliki tinggi keseluruhan yang merupakan tinggi halaman. Tahu Grid bahwa tinggi baris ketiga adalah 100 unit independen perangkat. Ini mengurangi tinggi itu dari tingginya sendiri, dan mengalokasikan ketinggian yang tersisa secara proporsional antara baris pertama dan kedua berdasarkan angka sebelum bintang. Dalam contoh ini, tinggi baris pertama adalah dua kali lipat dari baris kedua.
Kedua ColumnDefinition
objek keduanya mengatur Width
ke *
, yang sama dengan 1*
, yang berarti bahwa lebar layar dibagi rata di bawah dua kolom.
Penting
Nilai RowDefinition.Height
default properti adalah *
. Demikian pula, nilai ColumnDefinition.Width
default properti adalah *
. Oleh karena itu, tidak perlu mengatur properti ini dalam kasus di mana default ini dapat diterima.
Tampilan turunan dapat diposisikan dalam sel tertentu Grid dengan properti terlampir Grid.Column
dan Grid.Row
. Selain itu, untuk membuat tampilan anak mencakup beberapa baris dan kolom, gunakan Grid.RowSpan
properti dan Grid.ColumnSpan
terlampir.
XAML berikut menunjukkan definisi yang sama Grid , dan juga memposisikan tampilan anak dalam sel tertentu Grid :
<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>
Catatan
Properti Grid.Row
dan Grid.Column
keduanya diindeks dari 0, sehingga Grid.Row="2"
mengacu pada baris ketiga saat Grid.Column="1"
merujuk ke kolom kedua. Selain itu, kedua properti ini memiliki nilai default 0, sehingga tidak perlu diatur pada tampilan anak yang menempati baris pertama atau kolom pertama dari Grid.
Dalam contoh ini, ketiga Grid baris ditempati oleh BoxView dan Label dilihat. Baris ketiga adalah 100 unit independen perangkat tinggi, dengan dua baris pertama menempati ruang yang tersisa (baris pertama dua kali lebih tinggi dari baris kedua). Dua kolom sama dengan lebar dan membagi menjadi Grid dua. Baris BoxView ketiga mencakup kedua kolom:
Selain itu, tampilan anak dalam Grid dapat berbagi sel. Urutan bahwa anak-anak muncul di XAML adalah urutan bahwa anak-anak ditempatkan di Grid. Dalam contoh sebelumnya, Label objek hanya terlihat karena dirender di atas BoxView objek. Objek Label tidak akan terlihat jika BoxView objek dirender di atasnya.
Kode C# yang setara adalah:
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;
}
}
Dalam kode, untuk menentukan tinggi RowDefinition
objek, dan lebar ColumnDefinition
objek, Anda menggunakan nilai GridLength
struktur, sering kali dikombinasikan dengan GridUnitType
enumerasi.
Catatan
Grid juga menentukan AddWithSpan metode ekstensi yang menambahkan tampilan ke Grid
pada baris dan kolom yang ditentukan dengan rentang baris dan kolom yang ditentukan.
Menyederhanakan definisi baris dan kolom
Di XAML, karakteristik Grid baris dan kolom dapat ditentukan menggunakan sintaks yang disederhanakan yang menghindari harus menentukan RowDefinition
dan ColumnDefinition
objek untuk setiap baris dan kolom. Sebagai gantinya RowDefinitions
, properti dan ColumnDefinitions
dapat diatur ke string yang berisi nilai yang dibatasi GridUnitType
koma, dari mana pengonversi jenis yang dibangun ke dalam .NET MAUI membuat RowDefinition
dan ColumnDefinition
objek:
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
Dalam contoh ini, Grid memiliki lima baris dan empat kolom. Baris ketiga, ke depan, dan kelima diatur ke tinggi absolut, dengan ukuran otomatis baris kedua ke kontennya. Tinggi yang tersisa kemudian dialokasikan ke baris pertama.
Kolom ke atas diatur ke lebar absolut, dengan ukuran otomatis kolom ketiga ke kontennya. Lebar yang tersisa dialokasikan secara proporsional antara kolom pertama dan kedua berdasarkan angka sebelum bintang. Dalam contoh ini, lebar kolom kedua adalah dua kali lipat dari kolom pertama (karena *
identik dengan 1*
).
Spasi antara baris dan kolom
Secara default, Grid baris dan kolom tidak memiliki spasi di antaranya. Ini dapat diubah dengan mengatur RowSpacing
properti dan ColumnSpacing
, masing-masing:
<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>
Contoh ini membuat Grid baris dan kolom yang dipisahkan oleh 6 unit ruang independen perangkat:
Tip
Properti RowSpacing
dan ColumnSpacing
dapat diatur ke nilai negatif untuk membuat konten sel tumpang tindih.
Kode C# yang setara adalah:
public class GridSpacingPage : ContentPage
{
public GridSpacingPage()
{
Grid grid = new Grid
{
RowSpacing = 6,
ColumnSpacing = 6,
...
};
...
Content = grid;
}
}
Penjajaran
Tampilan anak dalam Grid dapat diposisikan di dalam selnya oleh HorizontalOptions
properti dan VerticalOptions
. Properti ini dapat diatur ke bidang berikut dari LayoutOptions
struktur:
Start
Center
End
Fill
XAML berikut membuat Grid dengan sembilan sel berukuran sama, dan menempatkan Label di setiap sel dengan perataan yang berbeda:
<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>
Dalam contoh ini, Label objek di setiap baris semuanya diratakan secara identik secara vertikal, tetapi gunakan perataan horizontal yang berbeda. Atau, ini dapat dianggap sebagai Label objek di setiap kolom yang secara identik selaras secara horizontal, tetapi menggunakan perataan vertikal yang berbeda:
Kode C# yang setara adalah:
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;
}
}
Objek Kisi Berlapis
Grid Dapat digunakan sebagai tata letak induk yang berisi objek turunan Grid berlapis, atau tata letak anak lainnya. Saat menumpuk Grid objek, Grid.Row
properti , Grid.Column
, Grid.RowSpan
, dan Grid.ColumnSpan
terlampir selalu merujuk ke posisi tampilan dalam induknya Grid.
XAML berikut menunjukkan contoh objek berlapis Grid :
<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>
Dalam contoh ini, akar Grid berisi BoxView di baris pertamanya, dan anak Grid di baris kedua. Anak Grid berisi objek yang memanipulasi warna yang ditampilkan oleh BoxViewobjek , dan Label yang menampilkan nilai masing-masing SliderSlider :
Penting
Semakin dalam Anda menumpuk Grid objek dan tata letak lainnya, semakin banyak perhitungan tata letak yang akan dilakukan yang dapat memengaruhi performa. Untuk informasi selengkapnya, lihat Memilih tata letak yang benar.
Kode C# yang setara adalah:
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);
}
}
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk