Geekly articles weekly

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/

More articles:


All Articles