Stilvolle Avalonia

Standardmäßig sind Stile, die in wpf und in Avalonia verwendet werden, äußerst neutral und bei weitem nicht immer für die Aufgaben geeignet, die wir benötigen, und nur wenige unerfahrene Entwickler sind mit ihnen befreundet. 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. Erlaube nicht, Beschreibungen von Elementen zu duplizieren;
3. Trennen Sie das Markup selbst und sein Design.

Ein paar Beispiele

Zum besseren Verständnis der Stile wenden wir uns zunächst einem Beispiel zu:

Abgerundeter Knopf (so etwas wie ein Ubuntu-Gnom)
Zu diesem Zweck erstellen wir in der Standardvorlage ( Erstellen einer Vorlage ) ein einfaches Markup 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 Schaltflächen mit dem Haupthintergrund und der Schriftfarbe bearbeiten, 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 nicht mö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 schreiben Sie in die Schaltflächen, mit denen das Klassenattribut „dekoriert“ werden soll.

  <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 geben den Stilen an, 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> 

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 unsere Styles dort in Form von XML- oder XAML-Dateien ein. Fügen Sie dabei die Namespace-Anweisungen 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 Ressource avaloniya:

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

Fügen Sie nun die 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> 

Etwas nützlicher

Schauen Sie sich unbedingt das offizielle Tutorial im Avalonia-Stil an ( tyk )
Hier erhalten Sie grundlegende Ideen, wie Sie einen Stil für dieses oder jenes Element schreiben können ( tyk ).
Und wenn Sie keine Zeit / Lust haben, Ihren eigenen Stil zu kreieren, können Sie diesen wunderbaren Stilgenerator ( tyk ) verwenden.



Ich möchte mich bei ForNeVer kekekeks worldbeater bedanken

Beachten Sie, dass hier Unterstützung für c # und hier für Avalonia zu finden ist .