What is the best way to create toolbar buttons with separate active/disabled images in WPF?

Question

I'm working on the toolbar for a WPF application. The icon set we are using has separate icons for normal, hover and disabled states, and I would like to use them. I was wondering what the simplest solution/normal way of doing this is?

My first thought was to create a user control "ImageButton" with properties NormalImage, ActiveImage, DisabledImage, that contained the necessary triggers for IsMouseOver and IsEnabled. This works, but unfortunately causes the buttons to lose the toolbar button style, i.e. they get the standard button borders, no blue background on mouseover and are spaced too closely together. As I understand it, this is because WPF's Toolbar control overrides the style for child Button elements, and fails to restyle my Buttons because they are inside a parent ImageButton.

Does anyone have any suggestions for getting this to work? I'm pretty new to WPF so it could be I'm just approaching this in a backwards manner.

Answer 1

You can base the style of your Button on the Style yielded by ToolBar.ButtonStyleKey. For example:

<Style TargetType="Button" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="MinHeight" Value="40"/>
</Style>