Silverlight - Tata Letak Dinamis
Itu Canvasadalah yang paling tidak menarik dari semua panel Tata Letak Silverlight. Panel lain memungkinkanDynamic Layouts, artinya tata letak dapat beradaptasi saat jumlah item yang ditampilkan berubah, atau ukuran informasi yang ditampilkan bervariasi, atau jika jumlah ruang yang tersedia untuk aplikasi berubah karena pengguna telah mengubah ukuran browser.
Silverlight menawarkan dua panel dengan strategi Tata Letak Dinamis.
StackPanel - yang menyusun elemen dalam tumpukan vertikal atau horizontal.
Grid - yang menyediakan sistem tata letak seperti kisi atau tabel yang fleksibel.
Panel Tumpukan
Panel tumpukan adalah panel tata letak yang sederhana dan berguna di XAML. DiStack Panel, elemen anak dapat diatur dalam satu baris baik secara horizontal maupun vertikal berdasarkan properti orientasinya. Ini sering digunakan kapan pun jenis daftar apa pun perlu dibuat. ItemsControls menggunakan panel tumpukan.Menu, ListBox dan ComboBox adalah panel tata letak internal default mereka.
Diberikan di bawah ini adalah yang biasa digunakan properties dari StackPanel.
No Sr | Deskripsi properti |
---|---|
1 | Background Mendapat atau menyetel Kuas yang mengisi area konten panel. (Diwariskan dari Panel) |
2 | Children Mendapat UIElementCollection elemen anak dari Panel ini. (Diwariskan dari Panel.) |
3 | Height Mendapat atau menyetel ketinggian elemen yang disarankan. (Diwariskan dari FrameworkElement.) |
4 | ItemHeight Mendapat atau menetapkan nilai yang menentukan tinggi semua item yang dimuat dalam WrapPanel. |
5 | ItemWidth Mendapat atau menetapkan nilai yang menentukan lebar semua item yang dimuat dalam WrapPanel. |
6 | LogicalChildren Mendapat enumerator yang dapat mengulang elemen anak logis dari elemen Panel ini. (Diwariskan dari Panel.) |
7 | LogicalOrientation Orientasi panel, jika panel mendukung tata letak hanya dalam satu dimensi. (Diwariskan dari Panel.) |
8 | Margin Mendapat atau menyetel margin luar suatu elemen. (Diwariskan dari FrameworkElement.) |
9 | Name Mendapat atau menetapkan nama pengenal elemen. Nama tersebut memberikan referensi sehingga kode di belakang, seperti kode penanganan kejadian, dapat merujuk ke elemen markup setelah dibuat selama pemrosesan oleh prosesor XAML. (Diwariskan dari FrameworkElement.) |
10 | Orientation Mendapat atau menetapkan nilai yang menentukan dimensi tempat konten anak diatur. |
11 | Parent Mendapat elemen induk logis dari elemen ini. (Diwariskan dari FrameworkElement.) |
12 | Resources Mendapat atau menyetel kamus sumber daya yang ditentukan secara lokal. (Diwariskan dari FrameworkElement.) |
13 | Style Mendapat atau menyetel gaya yang digunakan oleh elemen ini saat dirender. (Diwariskan dari FrameworkElement.) |
14 | Width Mendapat atau menyetel lebar elemen. (Diwariskan dari FrameworkElement.) |
Contoh berikut menunjukkan cara menambahkan elemen anak ke dalam file StackPanel. Diberikan di bawah ini adalah implementasi XAML di manaButtons dibuat di dalam StackPanel dengan beberapa properti.
<UserControl x:Class = "DynamicLayout.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<StackPanel>
<Button x:Name = "button" Content = "Button" Margin = "10" />
<Button x:Name = "button1" Content = "Button" Margin = "10"/>
<Button x:Name = "button2" Content = "Button" Margin = "10"/>
<Button x:Name = "button3" Content = "Button" Margin = "10"/>
</StackPanel>
</Grid>
</UserControl>
Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat output berikut.
StackPanel mencoba mengatur setiap elemen agar memiliki ruang sebanyak yang dibutuhkan dalam arah penumpukan.
Sekarang jika Anda mengubah ukuran browser, Anda akan melihat bahwa lebar tombol juga telah berubah.
Kotak
Panel grid menyediakan area yang fleksibel, yang terdiri dari baris dan kolom. DiGrid, elemen anak dapat diatur dalam bentuk tabel. Sebuah elemen dapat ditambahkan ke baris dan kolom tertentu dengan menggunakanGrid.Row dan Grid.Columnproperti. Secara default, fileGridpanel dibuat dengan satu baris dan satu kolom. Beberapa baris dan kolom dibuat olehRowDefinitions dan ColumnDefinitionsproperti. Tinggi baris dan lebar kolom dapat ditentukan dengan tiga cara berikut -
Fixed value - Untuk menetapkan ukuran tetap unit logis (1/96 inci).
Auto - Ini akan mengambil ruang, yang diperlukan untuk kontrol di baris / kolom tertentu.
Star (*) - Ini akan memakan ruang yang tersisa saat Auto dan fixed sized terisi.
Diberikan di bawah ini adalah yang biasa digunakan properties dari Grid kelas.
No Sr | Deskripsi properti |
---|---|
1 | Background Mendapat atau menyetel Kuas yang mengisi area konten panel. (Diwariskan dari Panel) |
2 | Children Mendapat UIElementCollection elemen anak dari Panel ini. (Diwariskan dari Panel.) |
3 | ColumnDefinitions Mendapat daftar objek ColumnDefinition yang ditentukan pada instance Grid ini. |
4 | Height Mendapat atau menyetel ketinggian elemen yang disarankan. (Diwariskan dari FrameworkElement.) |
5 | ItemHeight Mendapat atau menetapkan nilai yang menentukan tinggi semua item yang dimuat dalam WrapPanel. |
6 | ItemWidth Mendapat atau menetapkan nilai yang menentukan lebar semua item yang dimuat dalam WrapPanel. |
7 | Margin Mendapat atau menyetel margin luar suatu elemen. (Diwariskan dari FrameworkElement.) |
8 | Name Mendapat atau menetapkan nama pengenal elemen. Nama tersebut memberikan referensi sehingga kode di belakang, seperti kode penanganan kejadian, dapat merujuk ke elemen markup setelah dibuat selama pemrosesan oleh prosesor XAML. (Diwariskan dari FrameworkElement.) |
9 | Orientation Mendapat atau menetapkan nilai yang menentukan dimensi tempat konten anak diatur. |
10 | Parent Mendapat elemen induk logis dari elemen ini. (Diwariskan dari FrameworkElement.) |
11 | Resources Mendapat atau menyetel kamus sumber daya yang ditentukan secara lokal. (Diwariskan dari FrameworkElement.) |
12 | RowDefinitions Mendapat daftar objek RowDefinition yang ditentukan pada instance Grid ini. |
13 | Style Mendapat atau menyetel gaya yang digunakan oleh elemen ini saat dirender. (Diwariskan dari FrameworkElement.) |
14 | Width Mendapat atau menyetel lebar elemen. (Diwariskan dari FrameworkElement.) |
Diberikan di bawah ini adalah yang biasa digunakan methods dari Grid kelas.
No Sr | Metode & Deskripsi |
---|---|
1 | GetColumn Mendapatkan nilai properti terlampir Grid.Column XAML dari FrameworkElement yang ditentukan. |
2 | GetColumnSpan Mendapatkan nilai properti terlampir Grid.ColumnSpan XAML dari FrameworkElement yang ditentukan. |
3 | GetRow Mendapatkan nilai properti terlampir Grid.Row XAML dari FrameworkElement yang ditentukan. |
4 | SetColumn Menetapkan nilai properti terlampir Grid.Column XAML pada FrameworkElement yang ditentukan. |
5 | SetRow Menetapkan nilai properti terlampir Grid.Row XAML pada FrameworkElement yang ditentukan. |
6 | SetRowSpan Menetapkan nilai properti terlampir Grid.RowSpan XAML pada FrameworkElement yang ditentukan. |
Contoh berikut menunjukkan cara menambahkan elemen anak ke dalam Grid untuk menentukannya dalam bentuk tabel. Diberikan di bawah ini adalah implementasi XAML di mana beberapa elemen UI ditambahkan.
<UserControl x:Class = "DynamicLayout.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "130" />
<ColumnDefinition Width = "1*" />
<ColumnDefinition Width = "2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "50" />
</Grid.RowDefinitions>
<TextBlock Grid.Column = "0" Grid.Row = "0"
Text = "Content that no longer fits, not even close here"
TextWrapping = "Wrap" />
<Button Grid.Column = "1" Grid.Row = "0" Content = "OK" />
<Ellipse Grid.Column = "1" Grid.Row = "1" Fill = "Aqua" />
<Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20" />
</Grid>
</UserControl>
Kolom pertama disetel ke ukuran tetap. Setiap elemen di kolom ini akan memiliki lebar tersebut.Grid.Column dan Grid.Row properti menentukan baris dan kolom mana item ini berada, dan ini adalah properti berbasis 0.
Kolom kedua atau ketiga memiliki lebar 1* dan 2*. Ini berarti bahwa mereka membagikan ruang yang tersisa setelah kolom lebar tetap dan lebar otomatis mengambil ruang mereka. Signifikansi file1 dan 2 ini dia 2* kolom mendapat ruang dua kali lebih banyak dari 1* kolom.
Ketika kode di atas dijalankan, Anda akan melihat output berikut.
Saat Anda mengubah ukuran aplikasi, konten kedua kolom tersebut akan diubah ukurannya agar sesuai. Omong-omong, nilai absolut dari baris atau kolom berukuran bintang tidak menjadi masalah; hanya rasionya, yang penting.