Xamarin.Forms Grid
Grid adalah tata letak yang menata 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.
Tata Grid letak tidak boleh 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, CollectionView, atau TableView.
Kelas Grid menentukan properti berikut:
Column, dari jenisint, yang merupakan properti terlampir yang menunjukkan perataan kolom tampilan dalam indukGrid. 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 daftarColumnDefinitionobjek yang menentukan lebar kolom kisi.ColumnSpacing, dari jenisdouble, menunjukkan jarak antara kolom kisi. Nilai default properti ini adalah 6 unit independen perangkat.ColumnSpan, dari jenisint, yang merupakan properti terlampir yang menunjukkan jumlah total kolom yang mencakup tampilan dalam indukGrid. 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 indukGrid. 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 daftarRowDefintionobjek yang menentukan tinggi baris kisi.RowSpacing, dari jenisdouble, menunjukkan jarak antara baris kisi. Nilai default properti ini adalah 6 unit independen perangkat.RowSpan, dari jenisint, yang merupakan properti terlampir yang menunjukkan jumlah total baris yang mencakup tampilan dalam indukGrid. 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.
Kelas Grid berasal dari Layout<T> kelas , yang mendefinisikan Children properti jenis IList<T>. Properti Children adalah ContentProperty kelas Layout<T> , dan oleh karena itu tidak perlu diatur secara eksplisit dari XAML.
Tip
Untuk mendapatkan performa tata letak terbaik, ikuti panduan di Mengoptimalkan performa tata letak.
Baris dan kolom
Secara default, berisi Grid satu baris dan satu kolom:
<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>
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 (Autodalam 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://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>
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://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>
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 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;
}
}
Dalam kode, untuk menentukan tinggi RowDefinition objek, dan lebar ColumnDefinition objek, Anda menggunakan nilai GridLength struktur, sering kali dikombinasikan dengan GridUnitType enumerasi.
Contoh kode di atas juga menunjukkan beberapa pendekatan berbeda untuk menambahkan anak ke Grid, dan menentukan sel tempat mereka berada. Saat menggunakan Add kelebihan beban yang menentukan argumen kiri, kanan, atas, dan bawah , sementara argumen kiri dan atas akan selalu merujuk ke sel di dalam Grid, argumen kanan dan bawah tampaknya merujuk ke sel yang berada di luar Grid. Ini karena argumen kanan harus selalu lebih besar dari argumen kiri, dan argumen bawah harus selalu lebih besar dari argumen teratas. Contoh berikut, yang mengasumsikan 2x2 Grid, menunjukkan kode yang setara menggunakan kedua Add kelebihan beban:
// 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
Catatan
Selain itu, tampilan anak dapat ditambahkan ke Grid dengan metode dan AddVertical , yang menambahkan anak ke satu baris atau kolom GridAddHorizontal tunggal . Kemudian Grid diperluas dalam baris atau kolom saat panggilan ini dilakukan, serta secara otomatis memposisikan turunan dalam sel yang benar.
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 jenis pengonversi yang dibangun ke dalam Xamarin.Forms buat 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 dipisahkan oleh 6 unit ruang independen perangkat. Demikian pula, Grid kolom dipisahkan oleh 6 unit ruang independen perangkat. Default ini dapat diubah dengan mengatur RowSpacing properti dan ColumnSpacing , masing-masing:
<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>
Contoh ini membuat Grid yang tidak memiliki spasi antara baris dan kolomnya:
Tip
Properti RowSpacing dan ColumnSpacing dapat diatur ke nilai negatif untuk membuat konten sel tumpang tindih.
Kode C# yang setara adalah:
public GridSpacingPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
// ...
};
// ...
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:
Penting
Bidang AndExpands dalam LayoutOptions struktur hanya berlaku untuk StackLayout objek.
XAML berikut membuat Grid dengan sembilan sel berukuran sama, dan menempatkan Label di setiap sel dengan perataan yang berbeda:
<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>
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 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;
}
}
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.Rowproperti , 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://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>
Dalam contoh ini, tata letak 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 tata letak berlapis akan berdampak pada performa. Untuk informasi selengkapnya, lihat Memilih tata letak yang benar.
Kode C# yang setara adalah:
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);
}
}