How to Override FluentAvalonia Styles-CodePudding

Using FluentAvalonia styles for Avalonia in .NET.

Let's say I want to edit the default style to set the button background to AccentColor3 and on hover AccentColor2. How do I do that?

First, setting this style works; but setting ThemeAccentBrush3 doesn't. How do I set set the accent in a way that works for both dark and light themes?

<Style Selector="Button">
    <Setter Property="Background" Value="{DynamicResource SystemAccentColorDark3}" />
</Style>

Second, I figured that the best approach is to create an Avalonia Dictionary file

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StaticResource x:Key="ButtonBackground" ResourceKey="SystemAccentColorDark3" />
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemAccentColorDark2" />
</ResourceDictionary>

And then reference in App.axaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceInclude Source='avares://Common.Avalonia.App/Styles/DarkResources.axaml'/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

However, styles are loaded further down, and thus don't exist yet.

<Application.Styles>
    <sty:FluentAvaloniaTheme />

Thus...

Static resource 'SystemAccentColorDark3' not found.

What's the cleanest solution?

CodePudding user response：

<Style Selector="Button">
    <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
</Style>

Should work for your background value, then:

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

For your mouseover. Controls have a kind of "state" expressed using pseudoclasses that are applied at runtime which you can target in styles, in this case Button:pointerover.

CodePudding user response：

I managed to get the "accent" style with .35 opacity as default style by translating the "accent" style into a different syntax to override the resources... it's been considerably complicated to work out the references to make this translation, but it works.

The Dictionary needs to be inserted AFTER FluentAvalonia in App.xaml

Also, to consult the list of available resources, I can run the FluentAvalonia sample app which has a page allowing to visualize the whole list of resources and colors.

As a note for bindings to adapt with theme: StaticResource runs only once and DynamicResource tracks changes. To override the resource key, that needs StaticResource though.

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:flu="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia">

    <SolidColorBrush x:Key="ButtonBackgroundApp" Color="{DynamicResource SystemAccentColorLight2}" Opacity=".35" />
    <StaticResource x:Key="ButtonBackground" ResourceKey="ButtonBackgroundApp" />

    <LinearGradientBrush x:Key="ButtonBorderBrushApp" StartPoint="0,0" EndPoint="0,3" Opacity=".35">
        <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorOnAccentSecondary}" />
            <GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorOnAccentDefault}" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    <StaticResource x:Key="ButtonBorderBrush" ResourceKey="ButtonBorderBrushApp" />

    <SolidColorBrush x:Key="ButtonBackgroundPointerOverApp" Color="{DynamicResource SystemAccentColorLight2}"
                     Opacity=".30" />
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="ButtonBackgroundPointerOverApp" />

    <LinearGradientBrush x:Key="ButtonBorderBrushPointerOverApp" StartPoint="0,0" EndPoint="0,3" Opacity=".35">
        <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorOnAccentSecondary}" />
            <GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorOnAccentDefault}" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="ButtonBorderBrushPointerOverApp" />

    <SolidColorBrush x:Key="ButtonBackgroundPressedApp" Color="{DynamicResource SystemAccentColorLight2}" Opacity=".27" />
    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="ButtonBackgroundPressedApp" />

    <SolidColorBrush x:Key="ButtonBorderBrushPressedApp" Color="{DynamicResource ControlFillColorTransparent}"
                     Opacity=".35" />
    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="ButtonBorderBrushPressedApp" />

    <SolidColorBrush x:Key="ButtonBackgroundDisabledApp" 
                     Color="{DynamicResource TextOnAccentFillColorDisabled}" Opacity=".35" />
    <StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="ButtonBackgroundDisabledApp" />

    <SolidColorBrush x:Key="ButtonBorderBrushDisabledApp"
                     Color="{DynamicResource ControlFillColorTransparent}" Opacity=".35" />
    <StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="ButtonBorderBrushDisabledApp" />
</ResourceDictionary>