Davide De Santis
Davide De Santis

Reputation: 1035

Change Image Source when IsEnabled is false

I am trying to change an Image's Source property whenever the image is disabled/enabled. I checked this out and that worked, whenever the image is disabled the opacity is changed. However, as soon as I try to set the Source property, it just does not work. It is ignored. That's my markup:

<Image Source="/My_Project;component/Images/countdown.png" Width="75">
    <Image.Style>
        <Style TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Source" Value="/My_Project;component/Images/countdown.disabled.png"/> <!-- does not work -->
                    <!-- <Setter Property="Opacity" Value="0"/> this works! -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

Am I missing something? Is it even possible to change the Source property?

Upvotes: 0

Views: 767

Answers (2)

Clemens
Clemens

Reputation: 128061

Due to Dependency Property Value Precedence this will only work if you do not set a local value for the Source property, but instead also set it via the Style:

<Image Width="75">
    <Image.Style>
        <Style TargetType="Image">
            <Setter Property="Source"
                    Value="/My_Project;component/Images/countdown.png"/>    
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Source"
                        Value="/My_Project;component/Images/countdown.disabled.png"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

Upvotes: 2

Sheridan
Sheridan

Reputation: 69979

Your problem is that you have 'hard coded' the Image.Source value when you declared your Image. You need to move that to the Style too. Try this:

<Image Width="75">
    <Image.Style>
        <Style TargetType="Image">
            <Setter Property="Source" 
                Value="/My_Project;component/Images/countdown.png"/>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Source" 
                        Value="/My_Project;component/Images/countdown.disabled.png"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

The reason for this is because WPF has many different ways to update a DependencyProperty and so has a Dependency Property Value Precedence list which specifies which sources should be able to override changes made from other sources. According to this list, a local set value will override one set in a Style Trigger, but one set in a Style Trigger will override one set in a Style Setter.

Please refer to the linked page for further information on this.

Upvotes: 2

Related Questions