Geekly articles weekly

Avalonia yang bergaya

Gaya, secara default, di wpf, di Avalonia, netral, dan jauh dari cocok untuk tugas yang kita butuhkan. 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. Jangan menggandakan deskripsi item;
  3. Pisahkan markup itu sendiri dan desainnya.

Beberapa contoh


Untuk pemahaman gaya yang lebih baik, pertama-tama lihat sebuah contoh:

Tombol bulat (sesuatu yang mirip dengan gnome ubuntu)
Untuk melakukan ini, buat dalam templat standar ( cara membuat templat ) tata letak sederhana dari tumpukan panel dan beberapa tombol.

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

Sekarang kita dapat mengatur tombol latar belakang utama dan warna font, tetapi kemudian kita harus menduplikasi kode. 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 template dan atur atribut Classes ke tombol yang ingin kita “hias”.

  <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 gaya yang kami butuhkan untuk memengaruhi hanya 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>



Semua kode jendela
 <Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:Wind1.ViewModels;assembly=Wind1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="Wind1.Views.MainWindow" Icon="/Assets/avalonia-logo.ico" Title="Wind1"> <Window.Styles> <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> </Window.Styles> <StackPanel> <Button Margin="20" Content="Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> </StackPanel> </Window>


Contoh styling menarik lainnya
Kotak centang standar terlihat seperti ini:



Kotak centang yang disempurnakan mirip dengan android (sedikit)



Sedikit sihir
  <Window.Styles> <Style Selector = "CheckBox.uberbox"> <Setter Property = "Template"> <Setter.Value> <ControlTemplate> <Grid> <Border Background = "# b0b0b0" Padding = "5" BorderBrush = "# 303030" CornerRadius = "5"> <Grid> <Grid Classes = "unchecked" ColumnDefinitions = "Auto, Auto"> <Border Width = "20" Height = "20" Background = "Blue" CornerRadius = "5" /> <TextBlock FontWeight = "Bold" Margin = "5,0,0,0" Grid.Column = "1"> 0FF </TextBlock> </Grid> <Grid Classes = "checked" ColumnDefinitions = "Auto, Auto"> <Border Grid.Column = "1" Width = "20" Height = "20" Background = "Red" CornerRadius = "5" /> <TextBlock FontWeight = "Bold" Margin = "0,0,5,0"> ON </TextBlock> </Grid> </Grid> </Border> <Border Classes = "fade" Background = "White" CornerRadius = "5" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style Selector = "CheckBox.uberbox / template / Grid.checked"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox: checked / template / Grid.checked"> <Setter Property = "Opacity" Value = "1" /> </Style> <Style Selector = "CheckBox.uberbox: checked / template / Grid.unchecked"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox / template / Border.fade"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox: pointerover / template / Border.fade"> <Setter Property = "Opacity" Value = "0.2" /> </Style> </Window.Styles> <StackPanel> <CheckBox Classes = "uberbox" Margin = "10" /> </StackPanel>



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 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 sumber avaloina:

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

Sekarang tambahkan Styles.xml yang sudah 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 hal yang lebih bermanfaat


Pastikan untuk melihat Tutorial Gaya Avalonia resmi (di sini )
Anda bisa mendapatkan ide dasar tentang cara menulis gaya untuk elemen di sini (di sini )
Dan jika Anda tidak memiliki waktu / keinginan untuk menciptakan gaya Anda sendiri, maka Anda dapat menggunakan generator gaya yang indah ini (di sini )



Saya ingin mengucapkan terimakasih kepada ForNeVeR kekekeks dunia

Source: https://habr.com/ru/post/id471342/

More articles:


All Articles