How to gray out button image ONLY, not entire button

Question

I would like to gray out the image only instead of the entire button. The reason being is that the image on the button is partly transparent, so when the entire button is grayed out it just looks odd.

In the below image you can see the entire button is grayed out instead of just the visible image

fully grayed out button

related... sorta: Disabling Button with custom Content in Silverlight?

You could swap the image for a greyed-out version. – Oct 18 '13 at 14:23 — , Oct 18 '13 at 14:23
meh, i guess, but that seems like a real fall-back position – TruthOf42 Oct 18 '13 at 14:33 — TruthOf42, Oct 18 '13 at 14:33
On what event you want to gray the button ? – grv_9098 Oct 21 '13 at 07:16 — grv_9098, Oct 21 '13 at 07:16

score 0 · Answer 1 · answered Oct 21 '13 at 12:22

You will need to override the ControlTemplate for your button. How to do that?

Create a new style
In that style define the ControlTemplate
ControlTemplate find the definition for the visual state named "Disabled"
Change that so that it changes the image only, without greying out the entire button.

These are the relevant parts of your controls template

<ControlTemplate TargetType="Button">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <!-- other states go here -->
            <VisualState x:Name="Disabled">
                <Storyboard>
                    <DoubleAnimation Duration="0" 
                                     Storyboard.TargetName="DisabledImage"  
                                     Storyboard.TargetProperty="Opacity" To="1"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <!-- rest of the template goes here -->
</ControlTemplate>

The DisabledImage you reference in the visual state manager then would need to cover the image displayed on an enabled button entirely, so that when disabled, only the greyed out image is visible to the user.

How to gray out button image ONLY, not entire button

1 Answers1