WPF: IsPressed trigger of ControlTemplate not working

Question

I use a custom control named ImageButton to display a button with different images. ImageButton contains dependency properties:

public ImageSource DisabledImageSource
    {
        get { return (ImageSource)GetValue(DisabledImageSourceProperty); }
        set { SetValue(DisabledImageSourceProperty, value); }
    }


    public ImageSource NormalImageSource
    {
        get { return (ImageSource)GetValue(NormalImageSourceProperty); }
        set { SetValue(NormalImageSourceProperty, value); }
    }

    public ImageSource HoverImageSource
    {
        get { return (ImageSource)GetValue(HoverImageSourceProperty); }
        set { SetValue(HoverImageSourceProperty, value); }
    }

    public ImageSource PushedImageSource
    {
        get { return (ImageSource)GetValue(PushedImageSourceProperty); }
        set { SetValue(PushedImageSourceProperty, value); }
    }


    public static readonly DependencyProperty DisabledImageSourceProperty =
        DependencyProperty.Register("DisabledImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata());


    public static readonly DependencyProperty NormalImageSourceProperty =
        DependencyProperty.Register("NormalImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata());


    public static readonly DependencyProperty HoverImageSourceProperty =
        DependencyProperty.Register("HoverImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata());

    public static readonly DependencyProperty PushedImageSourceProperty =
        DependencyProperty.Register("PushedImageSource", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata());

It's style is defined as follows:

<Style TargetType="{x:Type local:ImageButton}">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Image Name="image" Source="{Binding NormalImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" />
                </Grid>
                <ControlTemplate.Triggers>                    
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="image" Property="Source" Value="{Binding DisabledImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Trigger>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter TargetName="image" Property="Source"  Value="{Binding PushedImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="image" Property="Source" Value="{Binding HoverImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Every thing works fine except IsPressed. I can never see the image I set in PushedImageSource and I can't figure out why. Any help would be appriciated :)

EDIT 1:

Here's the xaml code that tests it

<Window x:Class="SMEClient.WPF.Tester.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:is="clr-namespace:Project1.SearchBox;assembly=Project1"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Project1;component/SearchBox/ImageButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <is:ImageButton NormalImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
                            PushedImageSource="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"
                            HoverImageSource="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg"/>
        </StackPanel>
    </Grid>
</Window>

Answer 1

Your triggers are not mutual exclusive, in this case the order in which triggers are added to the Triggers collection comes into play. Your last trigger IsMouseOver overrides the Source property after IsPressed trigger setts the correct image, since a button is Pressed only if the mouse is over (when using mouse of course).

Try setting the IsPressed trigger last in the Triggers collection, and the IsPressed trigger will be applied even though IsMouseOver is also true.

Answer 2

OK, so I found a workaround which is kind of ugly, but it works

<Style TargetType="{x:Type local:ImageButton}">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Image Name="Normal" Source="{Binding NormalImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" Visibility="Visible" />
                    <Image Name="Hover" Source="{Binding HoverImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" Visibility="Hidden"/>
                    <Image Name="Clicked" Source="{Binding PushedImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" Visibility="Hidden"/>
                    <Image Name="Disabled" Source="{Binding DisabledImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" Visibility="Hidden"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Hover" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Clicked" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Hover" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Clicked" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Hover" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Clicked" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>