WPF trigger on attached property not working

Question

i'm trying to change an image which i put as button's content through an attached property, yet for some reason the image is not changing and i don't get any exceptions or anything solid in the output. Here is my attached property class code:

public class ImageButton

{ #region Image dependency property

    /// <summary>
    /// An attached dependency property which provides an
    /// <see cref="ImageSource" /> for arbitrary WPF elements.
    /// </summary>
    public static DependencyProperty ImageProperty;

    /// <summary>
    /// Gets the <see cref="ImageProperty"/> for a given
    /// <see cref="DependencyObject"/>, which provides an
    /// <see cref="ImageSource" /> for arbitrary WPF elements.
    /// </summary>
    public static ImageSource GetImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(ImageProperty);
    }

    /// <summary>
    /// Sets the attached <see cref="ImageProperty"/> for a given
    /// <see cref="DependencyObject"/>, which provides an
    /// <see cref="ImageSource" /> for arbitrary WPF elements.
    /// </summary>
    public static void SetImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(ImageProperty, value);
    }

    #endregion

static ImageButton()
    {
        //register attached dependency property
        var metadataImage = new FrameworkPropertyMetadata((ImageSource)null);
        ImageProperty = DependencyProperty.RegisterAttached("Image",
                                                            typeof(ImageSource),
                                                            typeof(ImageButton), metadataImage);
    }

}

here the code for the style using the attached property(the image source is set to take the value):

<Style TargetType="{x:Type Button}" x:Key="MyImageButton">
    <Setter Property="Background" Value="White"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border
                    x:Name="Border"
                    Background="White">
                    <ContentPresenter>
                        <ContentPresenter.Content>
                            <Grid
                                x:Name="Grid"
                                Background="White">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Image
                                     Grid.Column="0"
                                    Source="{Binding Path=(attachedProperties:ImageButton.Image),
                                                     RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Button}}}"
                                    Width="30"
                                    Height="25"
                                    Margin="5,0,2,0"
                                    VerticalAlignment="Center"/>
                                <TextBlock
                                    x:Name="TextBlock"
                                    Grid.Column="1"
                                    Text="{Binding Path=(attachedProperties:ImageButton.StringContent),
                                                   RelativeSource={RelativeSource     Mode=FindAncestor,AncestorType={x:Type Button}}}"
                                    VerticalAlignment="Center"
                                    TextAlignment="Center"
                                    Margin="0,0,15,0"/>
                            </Grid>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and finally the XAML code using the style and the trigger there trying to change the image source:

<Button
    Grid.Row="2"
    Width="30"
    attachedProperties:ImageButton.Image="..\Images\Down_Arrow_Enabled_Icon_25x25.png"
    Command="{Binding PriorityDownCommand}">
    <Button.Style>
       <Style TargetType="{x:Type Button}"
              BasedOn="{StaticResource MyImageButton}">
                <Style.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="attachedProperties:ImageButton.Image" Value="..\Images\Down_Arrow_Disabled_Icon_25x25.png"/>
                    </Trigger>
                </Style.Triggers>
       </Style>
    </Button.Style>

thanks ahead for anyone who can find the problem!!!

Answer 1

Please take a look at this Dependency Property Value Precedence article.

Your problem is that you are trying to override a Local Property Value from withing a Style Trigger, this cannot be done since the Local Value has a higher precedence value.

You should set the default property in style setters:

<Button
    Grid.Row="2"
    Width="30"
    Command="{Binding PriorityDownCommand}">
    <Button.Style>
       <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MyImageButton}">
           <Setter Property="attachedProperties:ImageButton.Image"  Value="..\Images\Down_Arrow_Enabled_Icon_25x25.png"/>
               <Style.Triggers>
                   <Trigger Property="IsEnabled" Value="False">
                       <Setter Property="attachedProperties:ImageButton.Image" Value="..\Images\Down_Arrow_Disabled_Icon_25x25.png"/>
                   </Trigger>
               </Style.Triggers>
      </Style>
    </Button.Style>
</Button>