WPF RelativeSource issue with nested controls

Question

I have the following markup:

<Button Name="m_SaveButton" Command="{Binding SaveCommand}">
    <StackPanel>
        <Image Source="{StaticResource IconSave16}">
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}" Value="False">
                            <Setter Property="Source" Value="{StaticResource IconSaveInactive16}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <Label Content="Save" />
    </StackPanel>
</Button>

I want to change the Image nested inside the Button when Button.IsEnabled is false. The markup above is not working.

I was trying to use Meleak's code found here: WPF Mouseover Trigger Effect for Child Controls

Does anyone can suggest me a solution for this?

Thank you in advance!

Answer 1

You can't change a local value in style because of Value Precedence. This should work.

<Image>
    <Image.Style>
        <Style TargetType="Image">
            <Setter Property="Source" Value="{StaticResource IconSave16}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}" Value="False">
                    <Setter Property="Source" Value="{StaticResource IconSaveInactive16}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>