Avalonia yang bergaya

Secara default, style di wpf, di Avalonia, sangat netral, dan jauh dari cocok untuk tugas-tugas yang kita butuhkan, dan beberapa pengembang pemula berteman dengan mereka. Pada artikel ini, saya ingin berbicara tentang dasar-dasar bekerja dengan gaya dan menunjukkan beberapa contoh menarik.



Mengapa kita membutuhkan gaya dalam kerangka Avalonia?

1. Gaya memberi lebih banyak kebebasan saat menyesuaikan elemen;
2. Izinkan untuk tidak menggandakan deskripsi elemen;
3. Pisahkan markup itu sendiri dan desainnya.

Beberapa contoh

Untuk memahami gaya dengan lebih baik, pertama-tama kita beralih ke contoh:

Tombol bulat (sesuatu seperti gnome ubuntu)
Untuk melakukan ini, kita akan membuat dalam templat standar ( cara membuat templat ) markup sederhana dari tumpukan panel dan beberapa tombol.

<StackPanel> <Button Margin="20" Content="Btn" /> <Button Margin="20" Content="Style Btn" /> </StackPanel> 

Sekarang kita dapat menangani tombol dengan latar belakang utama dan warna font, tetapi kemudian kita harus menduplikasi kodenya. Gaya akan membantu menghindari pengulangan ini.

Tambahkan gaya yang sesuai ke jendela:

  <Window.Styles> <Style Selector="Button"> <Setter Property="Foreground" Value="#FFFFFFFF" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="Background" Value="#FFDD4812" /> <Setter Property="BorderBrush" Value="#FFFFFFFF" /> </Style> </Window.Styles> 

Kami mendapatkan sesuatu yang serupa, tetapi akan lebih baik untuk membulatkan ujungnya. Sayangnya, tidak peduli bagaimana kami mencoba, tidak mungkin untuk membulatkan tepi tombol, tetapi Anda dapat membulatkan tepi templat yang bertanggung jawab untuk menampilkan tombol. Untuk melakukan ini, tambahkan gaya lain:

 <Style Selector="Button /template/ ContentPresenter"> <Setter Property="CornerRadius" Value="10" /> </Style> 

Ternyata hampir mirip, tetapi ada masalah - ketika Anda mengarahkan kursor ke atas tombol, bingkai abu-abu muncul (halo dari gaya standar).



Untuk melakukan ini, buka css : pointerover pseudo-class dan tambahkan gaya lain:

  <Style Selector="Button:pointerover /template/ ContentPresenter"> <Setter Property="BorderBrush" Value="#FFDD4812" /> </Style> 

Jauh lebih baik.

Tetapi bagaimana jika saya ingin menerapkan gaya hanya ke tombol tertentu?

Tambahkan satu tombol lagi ke templat dan tulis ke tombol yang ingin kita “hias” atribut Classes .

  <StackPanel> <Button Margin="20" Content="Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> </StackPanel> 

Dan kami akan menunjukkan kepada gaya bahwa kami hanya perlu memengaruhi kelas-kelas tertentu:

 <Style Selector="Button.btn /template/ ContentPresenter"> <Setter Property="CornerRadius" Value="10" /> </Style> <Style Selector="Button.btn"> <Setter Property="Foreground" Value="#FFFFFFFF" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="Background" Value="#FFDD4812" /> <Setter Property="BorderBrush" Value="#FFFFFFFF" /> </Style> <Style Selector="Button:pointerover.btn /template/ ContentPresenter"> <Setter Property="BorderBrush" Value="#FFDD4812" /> </Style> 

Tempat menggunakan gaya

Gaya dapat digunakan baik di dalam jendela (seperti yang kami lakukan dalam contoh yang ditulis di atas),
dan di dalam seluruh aplikasi (maka gaya akan berlaku di semua jendela).

Untuk melakukan ini, tambahkan gaya ke file App.xaml.

  <Application.Styles> <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/> <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/> <Style Selector="Button"> <Setter Property="Background" Value="Blue"></Setter> </Style> </Application.Styles> 

Pemisahan yang lebih besar

Dengan kerumitan kode, kami tidak lagi ingin menyimpan gaya di dalam tata letak jendela, tetapi lebih suka menempatkannya di file terpisah:



Untuk melakukan ini, buat direktori Styles dan letakkan gaya kami di sana dalam bentuk file xml atau xaml, dengan menambahkan instruksi namespace:

 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=netstandard"> <Style Selector="Button /template/ ContentPresenter"> <Setter Property="CornerRadius" Value="10" /> </Style> <Style Selector="Button"> <Setter Property="Foreground" Value="#FFFFFFFF" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="Background" Value="#FFDD4812" /> <Setter Property="BorderBrush" Value="#FFFFFFFF" /> </Style> <Style Selector="Button:pointerover /template/ ContentPresenter"> <Setter Property="BorderBrush" Value="#FFDD4812" /> </Style> </Styles> 

Tambahkan sumber daya baru ke file proyek (* .csproj):

  <AvaloniaResource Include="Styles\**" /> 

Dan hubungkan mereka menggunakan tag StyleInclude

 <Window.Styles> <StyleInclude Source="/Styles/Style.xml"/> </Window.Styles> 

Tapi kadang-kadang ini tidak cukup, dan saya ingin meletakkan style di dll yang terpisah untuk digunakan di semua proyek saya.

Untuk melakukan ini, buatlah ClassLibrary dan berikan dukungan untuk file kami di masa mendatang sebagai avaloniya sumber daya:

  <ItemGroup> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> </ItemGroup> <ItemGroup> <AvaloniaResource Include="**\*.xml"> <SubType>Designer</SubType> </AvaloniaResource> </ItemGroup> 

Sekarang tambahkan Styles.xml akrab dan 2 file baru ke proyek:



Dalam file xaml, Anda harus menentukan namespace dan kelas yang dimiliki, serta koneksi dari sumber daya yang diperlukan:

 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ClassLibrary1.DarkCustom"> <StyleInclude Source="avares://ClassLibrary1/Style.xml"/> </Styles> 

Dan dalam file cs kami mendefinisikan bahwa ini adalah gaya dan tidak lebih:

 namespace ClassLibrary1 { public class DarkCustom:Styles { } } 

Tambahkan ketergantungan ke perpustakaan kami dan sambungkan kembali gaya, tentukan gaya sebagai sumber daya avalonia menggunakan StyleInclude dan

  <Window.Styles> <StyleInclude Source="avares://ClassLibrary1/DarkCustom.xaml"/> </Window.Styles> 

Beberapa lebih bermanfaat

Pastikan untuk melihat tutorial gaya Avalonia resmi ( tyk )
Anda bisa mendapatkan ide dasar tentang cara menulis gaya untuk elemen ini atau itu di sini ( tyk )
Dan jika Anda tidak punya waktu / keinginan untuk menciptakan gaya Anda sendiri, maka Anda dapat menggunakan generator gaya yang luar biasa ini ( tyk )



Saya ingin mengucapkan terima kasih kepada ForNeVer kekekeks worldbeater

Dan perhatikan bahwa dukungan untuk c # dapat ditemukan di sini , dan untuk Avalonia di sini .