C#•13mo ago

✅ Styling Expander Avalonia

<Style Selector="Expander">
        <!-- changes styles of content inside drop down -->
    <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=DarkGray}" />
    <Setter Property="Background" Value="{DynamicResource ResourceKey=Purple}" />
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey=Pink}" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Width" Value="1200" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="0,20,0,0" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="CornerRadius" Value="20" />

        <!-- changes styles of header -->
    <Style Selector="^ /template/ ToggleButton#ExpanderHeader">
        <Setter Property="Background" Value="{DynamicResource ResourceKey=Purple}" />
        <Setter Property="Foreground" Value="{DynamicResource ResourceKey=Pink}" />
    </Style>
</Style>

<Style Selector="Expander">
        <!-- changes styles of content inside drop down -->
    <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=DarkGray}" />
    <Setter Property="Background" Value="{DynamicResource ResourceKey=Purple}" />
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey=Pink}" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Width" Value="1200" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="0,20,0,0" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="CornerRadius" Value="20" />

        <!-- changes styles of header -->
    <Style Selector="^ /template/ ToggleButton#ExpanderHeader">
        <Setter Property="Background" Value="{DynamicResource ResourceKey=Purple}" />
        <Setter Property="Foreground" Value="{DynamicResource ResourceKey=Pink}" />
    </Style>
</Style>

I am trying to change the style of the pointer over effect of the expander. I have tried everything I can think of while reading through https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/Expander.xaml and I cannot figure it out. I just want the background to be purple and the foreground to be pink on hover whether the expander is expanded or collapsed. As per the comments in the stylings, I have determined that the main stylings effect what's inside the drop down, and what's in the nested stylings changes the header, but I cannot figure out the pointer over effect. Thanks.

GitHub

Avalonia/src/Avalonia.Themes.Fluent/Controls/Expander.xaml at maste...

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET Foundation community project. - AvaloniaUI/Avalonia

1 Reply

Mekasu0124OP•13mo ago

i figured it out. nvm

Gaming

Programming

✅ Styling Expander Avalonia