ToggleButton Background Property Has No Effect, and Some Other Changes After Upgrading Package

[seikosantana]

Usage Information

Material.Avalonia 3.7.2, Avalonia 11.1.2, Windows 11 Pro 23H2

Description

I upgraded Material.Avalonia to 3.7.2 and noticed a few problems:

• ToggleButtons background becomes transparent
• Button class Icon now has background default theme color as background (i changed every usage of class Icon into Mini
• SideSheet close button now has background color

Reproduction Steps

For the toggle button:

1. Create a toggle button with a background

   <ToggleButton Background="Red">Toggle Button</ToggleButton>

2. See the result without no background

For the sidesheet

1. Create a sidesheet

   <controls:SideSheet Name="FiltersSideSheet" SideSheetOpened="{Binding ShowFilters, Mode=TwoWay}"
                           SideSheetDirection="Right" SideSheetContent="{Binding}">

2. See the result with the close sidesheet button having background

Expected Behavior

Is this expected or intentional? I thought Background would still work on ToggleButton and SideSheet close button would have transparent background.

Actual Behavior

As provided above

Regression?

Previously styled as expected in Material.Avalonia 3.0.2

Known Workarounds

For Button Class Icon i could replace with class Mini, but havent found workarounds for SideSheet.
Update:
Figured to style the border inside template to mimic the background used in previous version.

<ToggleButton
    Margin="4"
    IsChecked="{Binding IsVisible, Mode=TwoWay}">
    <ToggleButton.Styles>
        <Style
            Selector="ToggleButton /template/ Border#PART_RootBorder">
            <Setter Property="Background"
                    Value="{Binding Converter={StaticResource SeriesBackgroundColorConverter}}">
            </Setter>
        </Style>
    </ToggleButton.Styles>
    <TextBlock Text="{Binding Name}"
               TextDecorations="{Binding IsVisible, Converter={StaticResource SeriesStrikethroughApplicant}}" />
</ToggleButton>

Anything else?

No response

Could you help with a pull-request?

No

Is there an existing issue for this?

• [X] I have searched the existing issues

[SKProCH]

I'll take a look, but at least ToggleButtons has a small rework to make it consistent with other buttons, probably it will help: https://github.com/AvaloniaCommunity/Material.Avalonia/pull/375

[seikosantana]

I'm sorry I dont quite understand, does that mean for the ToggleButton part it is by design?

[seikosantana]

Update: I figured that i could style the border inside the template to mimic how backgrounds look in older version

<ToggleButton
    Margin="4"
    IsChecked="{Binding IsVisible, Mode=TwoWay}">
    <ToggleButton.Styles>
        <Style
            Selector="ToggleButton /template/ Border#PART_RootBorder">
            <Setter Property="Background"
                    Value="{Binding Converter={StaticResource SeriesBackgroundColorConverter}}">
            </Setter>
        </Style>
    </ToggleButton.Styles>
    <TextBlock Text="{Binding Name}"
               TextDecorations="{Binding IsVisible, Converter={StaticResource SeriesStrikethroughApplicant}}" />
</ToggleButton>

Before (uses ToggleButton background)

After:

[seikosantana]

For the SideSheet button part it seems to be caused by class Icon for button has changed since the previous version, while in the SideSheet the button still uses class Icon for the close button.

Workaround since i couldn't change the class used by sidesheet close button

<controls:SideSheet Name="FiltersSideSheet" SideSheetOpened="{Binding ShowFilters, Mode=TwoWay}"
                    SideSheetDirection="Right" SideSheetContent="{Binding}">
    <controls:SideSheet.Styles>
        <Style Selector="controls|SideSheet#FiltersSideSheet /template/ Button#PART_CloseButton.icon">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="Red" />
            <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
        </Style>
    </controls:SideSheet.Styles>

Before:

After:

[SKProCH]

I'm sorry I dont quite understand, does that mean for the ToggleButton part it is by design?

No, i mean what i've updated ToggleButton styles and probably it can help you resolve your problem. I've still doesn't have time to properly look at the problem (i hope at the weekend i can find some time).

[seikosantana]

So I have taken a look at #375 and it seems like the background property of ToggleButton isn't used on the PART_RootBorder like it used to. https://github.com/AvaloniaCommunity/Material.Avalonia/commit/70f8eeea9df24ae05d4696224375c6688ee87e4d#diff-7d3e797ee256a1e80943f025db2d39957199c7cd1e329467723cd8dca4c84ee0L26

I don't know if it is intentional but i tried adding that back into Background of PART_RootBorder and it shows the background as expected.

<Border Name="PART_RootBorder"
                Background="{TemplateBinding Background}"

I'm not confident to open a pull request since I haven't yet understood many basic concepts in Avalonia and styling stuff, but if you think that's a correct way then i could help with a (very simple) PR 😄

[SKProCH]

Yep, seems like this is the right way. Open that PR)

[seikosantana]

Hi I created the PR https://github.com/AvaloniaCommunity/Material.Avalonia/pull/398 😄

Then the next part is probably for class Icon used in SideSheet that causes the close button to have primay color background..

[seikosantana]

Thank you very much @SKProCH