Avalonia élégant

Les styles, par défaut, que dans wpf, que dans Avalonia, sont extrêmement neutres, et loin d'être toujours adaptés aux tâches dont nous avons besoin, et peu de développeurs novices sont amis avec eux. 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?

1. Les styles donnent plus de liberté lors de la personnalisation des éléments;
2. Permettez de ne pas dupliquer les descriptions des éléments;
3. Séparez le balisage lui-même et sa conception.

Quelques exemples

Pour une meilleure compréhension des styles, nous nous tournons d'abord vers un exemple:

Bouton arrondi (quelque chose comme un gnome ubuntu)
Pour ce faire, nous allons créer dans le modèle standard ( comment créer un modèle ) un simple balisage à 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 gérer les boutons avec l'arrière-plan principal et la couleur de la police, 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 écrivez sur les boutons que nous voulons «décorer» l'attribut Classes .

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

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 complexité 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 les instructions de 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 avaloniya:

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

Ajoutez maintenant le familier Styles.xml 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> 

Un peu plus utile

N'oubliez pas de consulter le tutoriel officiel de style Avalonia ( tyk )
Vous pouvez obtenir des idées de base sur la façon d'écrire un style pour tel ou tel élément ici ( tyk )
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 ( tyk )



Je voudrais dire merci à ForNeVer kekekeks worldbeater

Et notez que le support pour c # peut être trouvé ici , et pour Avalonia ici .