Using triggers with bindings?

Question

This is a follow-up to a question I posted yesterday here. Binding to icons works, using the code-snippet posted by H.B., but I can't seem to figure out how to add a trigger condition to it so that a different icon will be displayed on mouseover. The current code looks like this:

    xmlns:res="clr-namespace:MyProject.Resources"
    xmlns:Helpers="clr-namespace:MyProject.Converters"
    ...
    <Image Name="imgMin"
           Grid.Column="0"
           Stretch="UniformToFill"
           Cursor="Hand" 
           MouseDown="imgMin_MouseDown">
        <Image.Source>
            <Binding Source="{x:Static res:AppResources.minimize}">
                <Binding.Converter>
                    <Helpers:IconToImageSourceConverter/>
                </Binding.Converter>
            </Binding>
        </Image.Source>
    </Image>

What do I need to change here so that a different icon (res:AppResources.minimize_glow) is displayed on mouseover? I tried messing around with getting a trigger in there somewhere, but Image.Source doesn't accept another child, Binding doesn't support direct content, changing Image.Source to Image.Style doesn't work because Style cannot contain Binding... I'm running out of ideas here, and my Google-fu is failing to come up with anything useful. Besides, even if I could get a Trigger to work with this, putting a Binding to the highlighted icon into the Trigger would probably be my next headache. There has to be a way to do this, right?

score 1 · Accepted Answer · edited Apr 27 '11 at 19:51

You can add a style with a trigger combined with a setter to replace the image source with a new image source while the mouse is over the image. Remember that any setters in a style will have no effect if you set the property directly on the image. That is why we have the default setter in the style. I don't have visual studio available at the moment so I can't test, but hopefully the snippet will guide you.

<Image Name="imgMin"
       Grid.Column="0"
       Stretch="UniformToFill"
       Cursor="Hand" 
       MouseDown="imgMin_MouseDown">
    <Image.Style>
        <Style>
            <Style.Resources>
                <Helpers:IconToImageSourceConverter x:Key="IconToImageSourceConverter"/>
            </Style.Resources>
            <Setter Property="Image.Source">
                <Setter.Value>
                    <Binding Source="{x:Static res:AppResources.minimize}"
                             Converter="{StaticResource IconToImageSourceConverter}"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Image.IsMouseOver" Value="True">
                    <Setter Property="Image.Source">
                        <Setter.Value>
                            <Binding Source="{x:Static res:AppResources.minimize_glow}"
                                     Converter="{StaticResource IconToImageSourceConverter}"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

score 0 · Answer 2 · answered Apr 27 '11 at 17:24

You could use behaviors/triggers from System.Windows.Interactivity.dll library which you can find in your expression blend directory.

Those triggers/behaviors can be put besides the child of any element, since they themselves are not UI elements.

Then you could create a behavior that attaches to the MouseEnter, MouseLeave events and change the image accordingly to what you want.

You can see an example of this being done (look at the mouse over behavior): http://www.silverlightshow.net/items/Behaviors-and-Triggers-in-Silverlight-3.aspx

(Post is for silverlight but will work for wpf also).

Using triggers with bindings?

2 Answers2