XAML - Gaya

Kerangka XAML menyediakan beberapa strategi untuk mempersonalisasi dan menyesuaikan tampilan aplikasi. Gaya memberi kita fleksibilitas untuk mengatur beberapa properti dari suatu objek dan menggunakan kembali pengaturan spesifik ini di beberapa objek untuk tampilan yang konsisten.

Dalam gaya, Anda hanya dapat menyetel properti objek yang sudah ada seperti Tinggi, Lebar, dan Ukuran font.
Hanya perilaku default dari sebuah kontrol yang dapat ditentukan.
Beberapa properti dapat ditambahkan ke dalam satu gaya.

Gaya digunakan untuk memberikan tampilan seragam pada satu set kontrol. Gaya Implisit digunakan untuk menerapkan tampilan ke semua kontrol dari tipe tertentu dan menyederhanakan aplikasi.

Bayangkan kita memiliki tiga tombol dan semuanya harus terlihat sama - lebar dan tinggi yang sama, ukuran font yang sama, dan warna latar depan yang sama. Kita dapat mengatur semua properti itu pada elemen tombol itu sendiri dan itu masih cukup oke untuk semua tombol seperti yang ditunjukkan pada diagram berikut.

Tetapi dalam Aplikasi kehidupan nyata, Anda biasanya akan memiliki lebih banyak dari ini yang harus terlihat persis sama. Dan tidak hanya tombol saja, Anda biasanya ingin blok teks, kotak teks, dan kotak kombo, dll., Terlihat sama di seluruh Aplikasi Anda. Tentunya harus ada cara yang lebih baik untuk mencapai ini - itu dikenal sebagaistyling. Anda dapat menganggap gaya sebagai cara mudah untuk menerapkan sekumpulan nilai properti ke lebih dari satu elemen seperti yang diperlihatkan dalam diagram berikut.

Mari kita lihat contoh yang berisi tiga tombol yang dibuat di XAML dengan beberapa properti.

<Window x:Class = "XAMLStyle.MainWindow" 
   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"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Ketika Anda melihat kode di atas, Anda akan melihat bahwa untuk semua tombol, tinggi, lebar, warna latar depan, ukuran font, dan properti margin tetap sama. Ketika kode di atas dikompilasi dan dijalankan, itu akan menampilkan output berikut -

Sekarang mari kita lihat contoh yang sama, tapi kali ini, kita akan menggunakan style.

<Window x:Class = "XAMLStyle.MainWindow" 
   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"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

Gaya ditentukan dalam kamus sumber daya dan setiap gaya memiliki pengenal kunci unik dan jenis target. Di dalam <style>, Anda dapat melihat bahwa beberapa tag penyetel ditentukan untuk setiap properti yang akan disertakan dalam gaya.

Dalam contoh di atas, semua properti umum dari setiap tombol sekarang ditentukan dalam gaya, lalu gaya ditetapkan ke setiap tombol dengan kunci unik dengan menyetel properti gaya melalui ekstensi markup StaticResource.

Ketika kode di atas dikompilasi dan dijalankan, itu akan menghasilkan jendela berikut yang merupakan output yang sama.

Keuntungan melakukannya seperti ini langsung terlihat. Kita dapat menggunakan kembali gaya itu di mana pun dalam cakupannya, dan jika kita perlu mengubahnya, kita cukup mengubahnya sekali dalam definisi gaya alih-alih di setiap elemen.

Di tingkat apa gaya didefinisikan secara instan membatasi ruang lingkup gaya itu. Jadi cakupannya, yaitu di mana Anda dapat menggunakan gaya, bergantung pada tempat Anda mendefinisikannya. Gaya dapat ditentukan pada level berikut -

Sr Tidak	Level & Deskripsi
1	Level Kontrol Mendefinisikan gaya pada tingkat kontrol hanya dapat diterapkan ke kontrol tertentu.
2	Tingkat Tata Letak Mendefinisikan gaya pada setiap tingkat tata letak hanya dapat diakses oleh tata letak itu dan oleh elemen anaknya saja.
3	Level Jendela Mendefinisikan gaya pada tingkat jendela dapat diakses oleh semua elemen pada jendela itu.
4	Tingkat Aplikasi Mendefinisikan gaya pada tingkat Aplikasi membuatnya dapat diakses di seluruh aplikasi.