🔗 👨🏾‍🤝‍👨🏼 👩🏽‍🤝‍👨🏼 Avalonia élégant 🥘 🍲 🐪

Les styles, par défaut, en wpf, en Avalonia, sont neutres et loin d'être toujours adaptés aux tâches dont nous avons besoin. Dans cet article, je voudrais parler des bases du travail avec les styles et montrer quelques exemples intéressants.

Pourquoi avons-nous besoin de styles dans le cadre Avalonia?

Les styles donnent plus de liberté lors de la personnalisation des éléments;
Ne dupliquez pas les descriptions d'articles;
Séparez le balisage lui-même et sa conception.

Quelques exemples

Pour une meilleure compréhension des styles, regardez d'abord un exemple:

Bouton arrondi (quelque chose de similaire à un gnome ubuntu)
Pour ce faire, créez dans le modèle standard ( comment créer un modèle ) une disposition simple à partir de la pile de panneaux et quelques boutons.

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

Maintenant, nous pouvons définir les couleurs d'arrière-plan et de police des boutons, mais nous devrons ensuite dupliquer le code. Le style aidera à éviter cette répétition.

Ajoutez le style approprié à la fenêtre:

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

Nous obtenons quelque chose de similaire, mais ce serait bien d'arrondir les bords. Malheureusement, peu importe comment nous essayons, il est impossible d'arrondir les bords du bouton, mais vous pouvez arrondir les bords du modèle responsable de l'affichage du bouton. Pour ce faire, ajoutez un autre style:

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

Il s'est avéré presque similaire, mais il y a un problème - lorsque vous survolez le bouton, un cadre gris apparaît (bonjour du style standard).

Pour ce faire, passez à la pseudo-classe ~~css~~ : pointerover et ajoutez un autre style:

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

Tellement mieux.

Mais que faire si je souhaite appliquer des styles uniquement à des boutons spécifiques?

Ajoutez un bouton de plus au modèle et définissez l'attribut Classes sur les boutons que nous voulons «décorer».

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

Et nous indiquerons aux styles que nous devons influencer uniquement certaines classes:

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

Tout code de fenêtre

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

Un autre exemple de style intéressant

La case à cocher standard ressemble à ceci:

La case à cocher améliorée est similaire à Android (un peu)

Un peu de 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>

Où utiliser les styles

Les styles peuvent être utilisés à la fois dans la fenêtre (comme nous l'avons fait dans les exemples écrits ci-dessus),
et dans toute l'application (alors le style s'appliquera dans toutes les fenêtres).

Pour ce faire, ajoutez le style au fichier 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>

Une plus grande séparation

Avec la complication du code, nous ne voulons plus conserver les styles à l'intérieur de la disposition des fenêtres, mais préférons les mettre dans un fichier séparé:

Pour ce faire, créez le répertoire Styles et placez-y nos styles sous forme de fichiers xml ou xaml, en ajoutant l'espace de noms:

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

Ajoutez de nouvelles ressources au fichier de projet (* .csproj):

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

Et connectez-les à l'aide de la balise StyleInclude

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

Mais parfois, cela ne suffit pas, et je veux mettre les styles dans une DLL distincte à utiliser dans tous mes projets.

Pour ce faire, créez une bibliothèque de classes et fournissez un support pour nos futurs fichiers en tant que ressource avaloina:

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

Ajoutez maintenant le Styles.xml déjà familier et 2 autres nouveaux fichiers au projet:

Dans le fichier xaml, vous devez spécifier l'espace de noms et la classe à laquelle il appartient, ainsi que la connexion de la ressource nécessaire:

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

Et dans le fichier cs nous définissons que c'est un style et pas plus:

  namespace ClassLibrary1 { public class DarkCustom: Styles { } }

Ajoutez une dépendance à notre bibliothèque et reconnectez le style, en spécifiant le style en tant que ressource avalonia en utilisant StyleInclude et

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

Quelques trucs plus utiles

N'oubliez pas de consulter le didacticiel officiel de style Avalonia ( ici )
Vous pouvez obtenir des idées de base sur la façon d'écrire un style pour un élément ici ( ici )
Et si vous n'avez pas le temps / l'envie de créer votre propre style, vous pouvez utiliser ce merveilleux générateur de style ( ici )

Je voudrais dire merci ForNeVeR kekekeks worldbeater

Avalonia élégant

Quelques exemples

Où utiliser les styles

Une plus grande séparation

Quelques trucs plus utiles

More articles: