3 votes

AvaloniaUI Styles-pseudoclasses

J'essaie des styles en avalonie et la plupart fonctionnent, à l'exception des pseudoclasses, qui sont simplement ignorées.

J'ai créé une fenêtre et tous les styles s'y trouvent et j'ai créé un contrôle utilisateur (avec un bouton - les pseudoclasses sont sur le bouton), en utilisant les styles. Je n'utilise pas de code, seulement du xaml pour définir les styles.

J'ai essayé dans le "Sélecteur de style" pour le bouton comme "Button:pseudoclassname" et "Button.le:pseudoclassname". J'ai également essayé "Button:pointerover" et "Button:hover" car la documentation mentionne que cela peut être modifié. Aucun résultat. Les styles pour les pseudoclasses sont tous ignorés, les autres sont tous exécutés correctement.

Y a-t-il quelque chose que je fais mal ou s'agit-il d'un bug dans avalonia ?

Le fichier xaml Windows :

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:Hub.Views"
        xmlns:vm="using:Hub.ViewModels"
        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="Hub.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Width="200" Height="300"
        Title="Hub"
        Classes="le">

    <Window.Styles>
        <Style Selector="Window.le">
            <Setter Property="Background" Value="#191919"/>
        </Style>
        <Style Selector="Button.le">
            <Setter Property="Background" Value="green"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="Button.le:pointerover">
            <Setter Property="Background" Value="red"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="Button.le:pressed">
            <Setter Property="Background" Value="blue"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="TextBlock.le_update">
            <Setter Property="FontStyle" Value="Italic"/>
            <Setter Property="FontSize" Value="17"/>
            <Setter Property="FontFamily" Value="Arial, Verdana"/>
            <Setter Property="Foreground" Value="white"/>
            <Setter Property="Background" Value="transparent"/>
        </Style>
    </Window.Styles>

    <views:UpdateView/>

</Window>

Le fichier de contrôle utilisateur xaml :

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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="Hub.Views.UpdateView">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom">
            <Button Classes="le" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Width="300">
                Check for updates
            </Button>
        </StackPanel>
        <StackPanel Spacing="5" Margin="5">
            <TextBlock Classes="le_update" HorizontalAlignment="Center" Margin="4">
                No updates for Hub.
            </TextBlock>
            <TextBlock Classes="le_update" HorizontalAlignment="Center" Margin="4">
                No updates for Engine.
            </TextBlock>
        </StackPanel>
    </DockPanel>
</UserControl>

3voto

kekekeks Points 560

Button 's Background propriété fait de votre style, mais à ce moment-là, il a déjà été pas d'effet sur les résultats réels Button Les antécédents de l'entreprise parce que Background ne contrôle que la propriété normal état du bouton.

Si vous regardez la valeur par défaut de Button style aquí vous pouvez voir qu'il transmet son arrière-plan à ContentPresenter via TemplateBinding :

    <Setter Property="Template">
      <ControlTemplate>
        <ContentPresenter x:Name="PART_ContentPresenter"
                          Background="{TemplateBinding Background}"

mais remplace l'arrière-plan de ContentPresenter dans un style comme celui-ci :

  <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />

Puisque c'est ContentPresenter qui dessine l'arrière-plan ( Button est un contrôle sans regard), vous verrez le bouton pour avoir ButtonBackgroundPointerOver et non le Button 's Background valeur de la propriété.

Vous devez donc écrire un style qui modifie le ContentPresenter interne comme suit :

<Style Selector="Button.le:pointerover /template/ ContentPresenter#PART_ContentPresenter">
  <Setter Property="Background" Value="green" />
</Style>

Malheureusement, cela rend vos styles dépendants du thème puisque les modèles de contrôle sont différents entre le thème par défaut et le thème fluide.

2voto

Geertie Points 89

La réponse donnée par Kekekeks est la bonne pour la question que j'ai posée.

Toutefois, j'utilise cet espace dans l'espoir pour aider les utilisateurs novices d'avalonia qui n'ont aucune connaissance de xaml comme moi. La plupart d'entre nous consultent avalonia pour donner à nos applications une interface fonctionnant sous Windows/Mac/Linux . Pour être honnête, au moment où j'écris ces lignes, il n'existe pas de véritables alternatives en c#.

Pour l'instant, Avalonia dispose d'exemples et d'une certaine documentation, ce qui est bien, mais pas pour les personnes qui n'ont pas vraiment d'expérience en xaml.

C'est pourquoi, allez sur Udemy ou LikedIn.Learning ou Youtube ou n'importe où vous trouverez un bon cours sur WPF ET APRES cela allez à la documentation d'Avalonia et commencez à jouer.

Les similitudes que les deux (Avalonia et WPF) partagent sont énormes ! !! Et oui, il est mentionné à plusieurs reprises dans la documentation, mais un "Do go and learn WPF first if you are new to xaml !" sur la page d'accueil de la documentation m'aurait permis de gagner beaucoup de temps en essayant de tout trouver sur le site web.

Ce qui est juste est juste, le projet est encore en version bêta et le site web est déjà bien documenté à ce stade, donc l'équipe n'a rien à se reprocher !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X