Custom toggle button and states - how to give same effect to both MouseOver and Checked?

Question

I have made a custom button based on an image by more or less using the process found here:

http://www.kirupa.com/blend_silverlight/creating_custom_button_pg1.htm

I added a MouseOver state that enlarges the image 1.5x so when you hover over the image, it grows slightly bigger and then shrinks back to normal size when you move the mouse away. Everything is good, that's exactly what I want.

Now I want to make a toggle button that does exactly the same thing, but when the toggle button is pressed, the image size should stay at 1.5x to indicate it is checked. I tried adding the same enlarge effect to the Checked state and got a warning about changing an object-property in more than one state group.

This makes sense...if you press the toggle button the state gets set to Checked in CheckStates, but when you move the mouse away it scales the image back down to Normal in CommonStates. Thus, the image cannot stick at 1.5x.

So how exactly can I make this work? Is there any way to "kill" changing the state on mouse out if the button is checked?

Answer 1

In theory the 2 effects (hover and checked state) should still be separate. If "enlarged when checked" is active you would still expect the control to enlarge more on hover so the effects would be additive.

To avoid the clash you experienced, you need to apply the storyboard changes to 2 different elements in the control. Just make sure both have the same overall influence on the control. This may mean introducing an extra element above an existing element (e.g. a grid above the checkbox grid).

Hope this helps.