Stilvolle Avalonia

Stile in wpf, in Avalonia, sind standardmĂ€ĂŸig neutral und bei weitem nicht immer fĂŒr die Aufgaben geeignet, die wir benötigen. In diesem Artikel möchte ich ĂŒber die Grundlagen der Arbeit mit Stilen sprechen und einige interessante Beispiele zeigen.



Warum brauchen wir Stile im Avalonia-Framework?

  1. Stile bieten mehr Freiheit beim Anpassen von Elementen.
  2. Duplizieren Sie keine Artikelbeschreibungen.
  3. Trennen Sie das Markup selbst und sein Design.

Ein paar Beispiele


Schauen Sie sich zum besseren VerstÀndnis der Stile zunÀchst ein Beispiel an:

Abgerundeter Knopf (Ă€hnlich einem Ubuntu-Gnom)
Erstellen Sie dazu in der Standardvorlage ( Erstellen einer Vorlage ) ein einfaches Layout aus dem Bedienfeldstapel und einige SchaltflÀchen.

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

Jetzt können wir die Haupthintergrund- und Schriftfarben der SchaltflĂ€chen einstellen, aber dann mĂŒssen wir den Code duplizieren. Stil hilft, diese Wiederholung zu vermeiden.

FĂŒgen Sie dem Fenster den entsprechenden Stil hinzu:

  <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> 



Wir bekommen etwas Ähnliches, aber es wĂ€re schön, die Kanten abzurunden. UnabhĂ€ngig davon, wie wir es versuchen, ist es leider unmöglich, die Kanten der SchaltflĂ€che abzurunden, aber Sie können die Kanten der Vorlage abrunden, die fĂŒr die Anzeige der SchaltflĂ€che verantwortlich ist. FĂŒgen Sie dazu einen anderen Stil hinzu:

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



Es stellte sich fast Ă€hnlich heraus, aber es gibt ein Problem - wenn Sie mit der Maus ĂŒber die SchaltflĂ€che fahren, wird ein grauer Rahmen angezeigt (Hallo vom Standardstil).



Wenden Sie sich dazu der Pseudoklasse css : pointerover zu und fĂŒgen Sie einen weiteren Stil hinzu:

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



So viel besser.

Aber was ist, wenn ich Stile nur auf bestimmte SchaltflÀchen anwenden möchte?

FĂŒgen Sie der Vorlage eine weitere SchaltflĂ€che hinzu und setzen Sie das Attribut " Klassen" auf die SchaltflĂ€chen, die "dekoriert" werden sollen.

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

Und wir werden den Stilen zeigen, dass wir nur bestimmte Klassen beeinflussen mĂŒssen:

  <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> 



Alle Fenstercode
 <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> 


Ein weiteres interessantes Styling-Beispiel
Das Standard-KontrollkĂ€stchen sieht folgendermaßen aus:



Verbessertes KontrollkÀstchen Àhnelt Android (ein wenig)



Ein bisschen Magie
  <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> 



Wo man Stile verwendet


Stile können sowohl innerhalb des Fensters verwendet werden (wie in den oben beschriebenen Beispielen),
und innerhalb der gesamten Anwendung (dann gilt der Stil in allen Fenstern).

FĂŒgen Sie dazu den Stil zur Datei App.xaml hinzu

  <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> 

GrĂ¶ĂŸere Trennung


Mit der Komplikation des Codes möchten wir die Stile nicht mehr im Fensterlayout behalten, sondern in einer separaten Datei ablegen:



Erstellen Sie dazu das Styles-Verzeichnis und fĂŒgen Sie dort unsere Styles in Form von XML- oder XAML-Dateien ein. FĂŒgen Sie dabei den Namespace hinzu:

  <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> 

FĂŒgen Sie der Projektdatei neue Ressourcen hinzu (* .csproj):

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

Und verbinden Sie sie mit dem StyleInclude- Tag

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

Aber manchmal reicht dies nicht aus, und ich möchte die Stile in eine separate DLL einfĂŒgen, um sie in allen meinen Projekten zu verwenden.

Erstellen Sie dazu eine ClassLibrary und unterstĂŒtzen Sie unsere zukĂŒnftigen Dateien als Avaloina-Ressource:

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

FĂŒgen Sie nun die bereits bekannte Styles.xml und 2 weitere neue Dateien zum Projekt hinzu:



In der xaml-Datei mĂŒssen Sie den Namespace und die Klasse, zu der er gehört, sowie die Verbindung der erforderlichen Ressource angeben:

  <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> 

Und in der cs-Datei definieren wir, dass dies ein Stil ist und nicht mehr:

  namespace ClassLibrary1 { public class DarkCustom: Styles { } } 

FĂŒgen Sie unserer Bibliothek eine AbhĂ€ngigkeit hinzu und verbinden Sie den Stil erneut. Geben Sie den Stil mithilfe von StyleInclude und als Avalonia-Ressource an

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

Noch ein paar nĂŒtzliche Sachen


Schauen Sie sich unbedingt das offizielle Avalonia Style Tutorial an ( hier )
Hier ( hier ) erhalten Sie grundlegende Ideen zum Schreiben eines Stils fĂŒr ein Element.
Und wenn Sie nicht die Zeit / den Wunsch haben, Ihren eigenen Stil zu kreieren, können Sie diesen wunderbaren Stilgenerator verwenden ( hier )



Ich möchte mich bei ForNeVeR kekekeks worldbeater bedanken

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


All Articles