Button: Different background color for the same template

I was wondering if I could create a template for all my toggle buttons, yet still manage to change their colors as they were all supposed to have different hues. At first I thought it could be done via the contentPresenter, but a colleague helped me (greatly) to figure out how it could be possible. As with most things, it turned out to be rather simple.


In the button template (this is done on a toggle button)

Go to the background color, right-click on the little square and pick
"Template binding", then select "background" or whichever color you want it to be bound to (works with stroke, etc).

Exit the template and set a background color to your button, if you have not already done so.

Exemple for my round toggle button

Template
  > Grid
    > Background (canvas)
      > Grid
         > ellipseShadow (cheat to avoid the dropShadow effect in order to make the application run faster)
         > ellipse (is a rectangle in the default button)
         > BackGroundAnimation (canvas, was there in the default button, could likely be swapped for an ellipse too)
      > contentPresenter (canvas), not very useful in this example as there is no text in the buttons.
      > DisabledVisualElement (same shape as your button, ellipse in this case)
      > FocusVisualElement (I don't use it at the moment, but same as above)

In this case, the BackGroundAnimation is the one having its background bound to the "real" button.
The ellipseShadow has a gradient going from 100 to 0 in about 1-2 px. It is also 1-2 px bigger than the ellipse/BackGroundAnimation.

In the states, you simply have to make the BackGroundAnimation visible when the button is checked (if that is the effect you are aiming for, of course).