DataTrigger on an Image that should change the Image.Source property does not work

Question

I reproduced this question/answer as given below:

            <Button Command="Play" ToolTip="Execute Macro">
                <Image DataContext="{Binding ElementName=UserControlMacroEdit}" Source="/ParametricStudySharedGui;component/Image/arrowRight32x32.png" Height="24" Width="24">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsMacroRunning, Converter={StaticResource FakeTransparentConverter}, Mode=OneWay}" Value="True">
                                    <DataTrigger.Setters>
                                        <Setter Property="Source" Value="/ParametricStudySharedGui;component/Image/Run24.png"></Setter>
                                        <Setter Property="Opacity" Value=".5"></Setter>
                                    </DataTrigger.Setters>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Button>

However, there is a strange behavior. The "Opacity" changed but the image itself stay the same. It look like that I can't modify the Image.Source from a DataTrigger. Why?

Answer 1

Your original code does not work because of how dependency properties are handled. In particular, since they can be set from multiple places, WPF implements the idea of "priority" for such properties. "Locally set" properties (i.e. where they are set as part of the declaration of the element in XAML) have higher precedence over any setters found in styles.

Please see Dependency Property Value Precedence for more details.

You can work around the problem by initializing the Source property in the Style itself, rather than as part of the Image declaration:

            <Image DataContext="{Binding ElementName=UserControlMacroEdit}" Height="24" Width="24">
                <Image.Style>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="/ParametricStudySharedGui;component/Image/arrowRight32x32.png"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMacroRunning, Converter={StaticResource FakeTransparentConverter}, Mode=OneWay}" Value="True">
                                <DataTrigger.Setters>
                                    <Setter Property="Source" Value="/ParametricStudySharedGui;component/Image/Run24.png"></Setter>
                                    <Setter Property="Opacity" Value=".5"></Setter>
                                </DataTrigger.Setters>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>