DependencyProperty as Setter for Style Trigger

Context

• I made a custom control called ButtonPath which is derived from the default Button to allow me to easily add Buttons with different PathGeometry Figures and SolidColorBrush from the application's ResourceDictionary

• To achieve said goal, ButtonPath has two DependencyProperties:

  • PathGeometry, registered name = Path
  • SolidColorBrush, registered name = Fill

• This custom button works as intended in the relevant XAML files when it is placed As Is, e.g. in a UserControl:

<UserControl ... xmlns:customControls="...">
    <Grid>
        <customControls:ButtonPath
            Path="{StaticResource Record}"
            Fill="{StaticResource Brush.Dark.Foreground01.Static}"/>
    </Grid>
</UserControl>

---

Issue

Applying the Fill DependencyProperty as a Style Setter for DataTrigger does nothing, while other properties work just fine, e.g.:

• As showcased in the xaml snippets below, if the ToggleTimerCommand is executed, the button's Fill does not change while its Height does.

I've looked at other similar questions here but couldn't find the answer that I'm looking for and my previous tests returned no errors, so if someone could point me in the right direction, it'd be greatly appreciated.

Thanks in advance.

---

xaml snippets

The button within a UserControl

<UserControl ... xmlns:customControls="...">
    <Grid>
        <customControls:ButtonPath
            Command="{Binding ToggleTimerCommand}"
            Path="{StaticResource Record}"
            Style="{StaticResource buttonStyle_Record}"/>
    </Grid>
</UserControl>

Relevant Style

<ResourceDictionary ... xmlns:customControls="...">
    <Style
        x:Key="buttonStyle_Record"
        BasedOn="{StaticResource {x:Type customControls:ButtonPath}}"
        TargetType="customControls:ButtonPath">
        <Style.Triggers>
            <DataTrigger Binding="{Binding TimerActive}" Value="true">
                <Setter Property="Fill" Value="Red" />
                <Setter Property="Height" Value="25" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

The ButtonPath Template

<ResourceDictionary... xmlns:customControls="...">
    <Style TargetType="{x:Type customControls:ButtonPath}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type customControls:ButtonPath}">
                    <Border
                        Background="Transparent"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0">
                        <Viewbox Width="18" Height="18">
                            <Path
                                x:Name="icon"
                                Data="{TemplateBinding Path}"
                                Fill="{StaticResource Brush.Dark.Foreground01.Static}"
                                Stretch="Fill" />
                        </Viewbox>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--some common triggers-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

The Fill assignment in the ControlTemplate is wrong.

<Path x:Name="icon"
    Data="{TemplateBinding Path}"
    Fill="{StaticResource Brush.Dark.Foreground01.Static}"
    Stretch="Fill" />

It should be

<Path x:Name="icon"
    Data="{TemplateBinding Path}"
    Fill="{TemplateBinding Fill}"
    Stretch="Fill" />

---

As a note, there is no point in declaring your custom dependencies as PathGeometry and SolidColorBrush. You should be using the more general types Geometry and Brush.