Silverlight - Tata Letak Tetap
Tata letak kontrol sangat penting dan kritis untuk kegunaan aplikasi. Ini digunakan untuk mengatur sekelompok elemen GUI di aplikasi Anda. Ada beberapa hal penting yang perlu dipertimbangkan saat memilih panel tata letak. Mereka adalah -
- Posisi elemen anak.
- Ukuran elemen anak.
- Layering elemen anak yang tumpang tindih di atas satu sama lain.
Pengaturan kendali piksel tetap tidak berfungsi jika aplikasi telah digunakan pada resolusi layar yang berbeda. XAML menyediakan satu set panel tata letak bawaan yang kaya untuk mengatur elemen GUI dengan cara yang tepat.
Kami akan mulai dengan melihat simple fixedtata letak. Kemudian kita akan melihatDynamicskenario tata letak, yang telah dirancang untuk didukung oleh Silverlight. Kita akan melihat properti dan konsep terkait tata letak yang menembus semua elemen antarmuka pengguna.
Tata Letak Tetap
Jenis tata letak paling sederhana ditawarkan oleh Canvaselemen. ItuCanvas panel adalah panel tata letak dasar tempat elemen turunan dapat diposisikan secara eksplisit menggunakan koordinat yang relatif terhadap setiap sisi Canvas seperti kiri, kanan, atas, dan bawah.
Biasanya, file Canvasdigunakan untuk elemen grafis 2D (seperti Elips, Persegi Panjang, dll.). Ini tidak digunakan untuk elemen UI karena menentukan koordinat absolut memberikan masalah saat Anda mengubah ukuran, melokalkan, atau menskalakan aplikasi XAML Anda.
Diberikan di bawah ini adalah yang biasa digunakan properties dari Canvas 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 | Height Mendapat atau menyetel ketinggian elemen yang disarankan. (Diwariskan dari FrameworkElement.) |
| 4 | ItemHeight Mendapat atau menetapkan nilai yang menentukan ketinggian semua item yang ada di 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 | LeftProperty Mengidentifikasi properti terpasang Canvas.Left XAML. |
| 9 | Margin Mendapat atau menyetel margin luar suatu elemen. (Diwariskan dari FrameworkElement.) |
| 10 | 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.) |
| 11 | Orientation Mendapat atau menetapkan nilai yang menentukan dimensi tempat konten anak diatur. |
| 12 | Parent Mendapat elemen induk logis dari elemen ini. (Diwariskan dari FrameworkElement.) |
| 13 | Resources Mendapat atau menyetel kamus sumber daya yang ditentukan secara lokal. (Diwariskan dari FrameworkElement.) |
| 14 | Style Mendapat atau menyetel gaya yang digunakan oleh elemen ini saat dirender. (Diwariskan dari FrameworkElement.) |
| 15 | TopProperty Mengidentifikasi properti terlampir Canvas.Top XAML. |
| 16 | Width Mendapat atau menyetel lebar elemen. (Diwariskan dari FrameworkElement.) |
| 17 | ZIndexProperty Mengidentifikasi properti terlampir Canvas.ZIndex XAML. |
Diberikan di bawah ini adalah yang biasa digunakan methods dari Canvas.
| No Sr | Metode & Deskripsi |
|---|---|
| 1 | GetLeft Mendapat nilai properti terpasang Canvas.Left XAML untuk elemen target. |
| 2 | GetTop Mendapat nilai properti terlampir Canvas.Top XAML untuk elemen target. |
| 3 | GetZIndex Mendapatkan nilai properti terlampir Canvas.ZIndex XAML untuk elemen target. |
| 4 | SetLeft Menyetel nilai properti terpasang Canvas.Left XAML untuk elemen target. |
| 5 | SetTop Menetapkan nilai properti terlampir Canvas.Top XAML untuk elemen target. |
| 6 | SetZIndex Menyetel nilai properti terlampir Canvas.ZIndex XAML untuk elemen target. |
Contoh berikut menunjukkan cara menambahkan elemen anak ke dalam file Canvas. Di bawah ini adalah implementasi XAML di mana Ellipse dibuat di dalam Canvas dengan properti offset berbeda.
<UserControl x:Class = "FirstExample.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">
<Canvas Width = "380" Height = "280" >
<Ellipse Canvas.Left = "30" Canvas.Top = "30"
Fill = "Gray" Width = "200" Height = "120" />
</Canvas>
</Grid>
</UserControl>Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat output berikut.
