How can I set button's background color with Avalonia's pseudo-classes?

[BiDuang]

I want to set the normal and hover background colors of a button to custom colors using pseudo-classes, but my implementation seems to cause a flicker when the mouse leaves the area. In slow motion, I found that there is a frame where the color suddenly reverts to the default(not the default color I specified, but the default global color of FluentAvalonia).

How should I solve this problem?

Lib4Sharp_FE.2023-12-26.11-53-59.mp4

[BiDuang]

That's the code:

App.axaml

<Application.Resources>
        <SolidColorBrush x:Key="MajorBackgroundBrush">#25B8D9</SolidColorBrush>
        <SolidColorBrush x:Key="MajorFocusBackgroundBrush">#2EDFF2</SolidColorBrush>
    </Application.Resources>

    <Application.Styles>
        <styling:FluentAvaloniaTheme />

        <Style Selector="Button.MajorBtn">
            <Setter Property="Background" Value="{DynamicResource MajorBackgroundBrush}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="CornerRadius" Value="3" />
        </Style>
        <Style Selector="Button.MajorBtn:pointerover /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource MajorFocusBackgroundBrush}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="CornerRadius" Value="3" />
        </Style>
    </Application.Styles>

MyView.axaml

 <Button Grid.Column="1" Grid.Row="7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                VerticalContentAlignment="Center" Classes="MajorBtn" >
            <Grid ShowGridLines="True">
                <Viewbox>
                    <TextBlock Text="{i18N:ReactiveUiLocalization Login}" />
                </Viewbox>
            </Grid>
 </Button>

[timunie]

maybe inspect the original style to find the root cause here

[BiDuang]

So it's this a bug or just my usage is incorrect?

[timunie]

guess the first style is wrong

!        <Style Selector="Button.MajorBtn /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource MajorBackgroundBrush}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="CornerRadius" Value="3" />
        </Style>