Styling Buttons in WPF

Having trouble getting rid of the built-in borders when styling a button in Blend?  Replace the ButtonChrome elements with Border elements.  Borders have most of the properties of ButtonChromes, so the switch is about as hassle-free as it’s going to get.

Basically, ButtonChromes are a tool that allows .NET to set the visual appearance of certain elements based on the theme set on the end-user’s machine (which is why you can’t edit the elements directly).

Here’s a quick overview:

  • Right-click on the element you want to style, select Edit Template > Edit a Copy…
  • Go into the XAML and find the ButtonChrome elements.  Change them to Borders.
  • Depending on the element, you’ll have to remove a few parameters; just look for the squiggly red underlines that tell you something’s wrong.
  • Once your ButtonChromes are gone and you can build without errors, you may want to go through the style you created and look for things that are referencing dynamic/system resources, and redirect them to local or template-bound values.

Be ready to push through a headache.  Blend writes some pretty ugly XAML, and I for one find myself working less in the Design mode every day.