C
C#•2y ago
Mekasu0124

✅ 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
No description
No description
5 Replies
Mekasu0124
Mekasu0124OP•2y ago
i figured it out. nvm
devilbager
devilbager•2mo ago
how'd you figure it out?
Mekasu0124
Mekasu0124OP•2mo ago
lol that was back in November of 2023. I honestly couldn't even tell you what happened with this project. I haven't actually touched Avalonia since. I ventured off to Python's QT framework and Web Apps using React, Next JS wrapped with Electron for a desktop environment.
devilbager
devilbager•2mo ago
for anyone encountering this problem, the selector you're looking for is: 
<Style Selector="Expander /template/ ToggleButton:pointerover /template/ Border#ToggleButtonBackground">
</Style>
<Style Selector="Expander /template/ ToggleButton:pointerover /template/ Border#ToggleButtonBackground">
</Style>
Mekasu0124
Mekasu0124OP•2mo ago
❤️

Did you find this page helpful?