Shape.Fill and Style Selectors

[Rabbex1]

I'm trying to use a Style Selector to change the fill clolor of a path when the containing Button is disabled.
I also tried it using a PathIcon with the same result.
This is a simplified version of my code:

    <UserControl.Styles>
        <Style Selector="Path.Disableable:disabled">
            <Setter Property="Fill" Value="#3f3f3f"/>
        </Style>

        <Style Selector="Button.Player">
            <Setter Property="Width" Value="48"/>
            <Setter Property="Height" Value="24"/>
            <Setter Property="CornerRadius" Value="2"/>
            <Setter Property="Margin" Value="8, 0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="DodgerBlue" />
            <Setter Property="BorderThickness" Value="1"></Setter>
        </Style>

        <Style Selector="Button.Player:pointerover /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="#1F1F1F" />
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Style>

        <Style Selector="Button.Player:pressed /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="#1F1F1F" />
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Style>

        <Style Selector="Button.Player:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="#3F3F3F" />
        </Style>
    </UserControl.Styles>

    <UserControl.Resources>
        <Canvas x:Key="PauseButton" Width="22" Height="22">
            <Path Classes="Disableable"
                  Fill="DodgerBlue"
                  Data="M 5,2 A 1.0001,1.0001 0 0 0 4,3 v 16 a 1.0001,1.0001 0 0 0 1,1 h 4 a 1.0001,1.0001 0 0 0 1,-1 V 3 A 1.0001,1.0001 0 0 0 9,2 Z M 6,4 H 8 V 18 H 6 Z" />
            <Path Classes="Disableable"
                  Fill="DodgerBlue"
                  Data="m 13,2 a 1.0001,1.0001 0 0 0 -1,1 v 16 a 1.0001,1.0001 0 0 0 1,1 h 4 a 1.0001,1.0001 0 0 0 1,-1 V 3 A 1.0001,1.0001 0 0 0 17,2 Z m 1,2 h 2 v 14 h -2 z" />
        </Canvas>
		<Canvas x:Key="PlayFwdButton" Width="22" Height="22">
			<Path Classes="Disableable"
                  Fill="DodgerBlue"
                  Data="M 5.5664062,2.09817 A 1.0001,1.0001 0 0 0 5,3.00052 v 16 a 1.0001,1.0001 0 0 0 1.625,0.78125 l 10,-8 a 1.0001,1.0001 0 0 0 0,-1.5625 l -10,-8 A 1.0001,1.0001 0 0 0 5.5664062,2.09817 Z M 7,5.08255 14.398438,11.00052 7,16.91849 Z" />
 		</Canvas>
    </UserControl.Resources>

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
	<Button Classes="Player" Content="{StaticResource PauseButton}" IsEnabled="False"/>
	<Button Classes="Player" Content="{StaticResource PlayFwdButton}"/>
    </StackPanel>

The Button works as expected but the Path doesn't change color.
According to the debugger the selector is being applied to the Path but not activated.

Maybe I am missing something obvious, but am starting to wonder if this has something todo with the fact that Fill is an ImmutableSolidColorBrush. I would have thought that that meant the brush couldn't be changed once created, not that it couldn't be replaced.

Any suggestions would be appreciated.

[stevemonaco]

Your Paths inside the Canvas have local set values which aren't easy to override by styles. ie. The Fill. Instead, remove that and create styles like these:

<Style Selector="Button.Player Path">
    <Setter Property="Fill" Value="DodgerBlue" />
</Style>

<Style Selector="Button.Player:pointerover Path">
    <Setter Property="Fill" Value="DodgerBlue" />
</Style>

<Style Selector="Button.Player:pressed Path">
    <Setter Property="Fill" Value="DodgerBlue" />
</Style>

<Style Selector="Button.Player:disabled Path">
    <Setter Property="Fill" Value="Transparent" />
</Style>

Note the first style which applies the defaults. You can't target the ContentPresenter because it doesn't have Path-specific properties.

Also, it's a bad idea to add controls to Resources. A control can only have one parent, so it's not reusable. Just inline it with the Button. You should be using PathIcon instead of the Canvas anyways.

[Rabbex1]

Thanks @stevemonaco That did the trick.
I had the Canvases as resources because I was still thinking WPF which allows you to share them so your not restricted to a single parent.
Also the reason for using Canvases in lieu of PathIcon is that you can have multiple paths with different colors which I don't think PathIcon allows. Though that might get a bit tricky using this approach unless I apply classes to the Paths to identify the color and implement your suggestion for each one.

[stevemonaco]

Yeah, PathIcon is limited to a single path. Canvas is probably fine for multiple paths, but Panel is a bit lighter since you don't need positioning. You could also use an SVG element via https://github.com/wieslawsoltes/Svg.Skia

There should be some middle ground so fewer UI controls are involved. I've used DrawingImage in WPF before, but haven't needed to in Avalonia.

[maxkatz6]

Btw, nightly builds show local values set in the same Styles group. It's less confusing there.
But this feature will only be available in 11.2.