Customizing look of a Silverlight button

During my Introduction to Silverlight presentation at the Atlanta .NET users group, someone suggested that I show how make a button with rounded corners in Silverlight.  I was a bit short on time, and it was getting late, so I decided to write a blog post on the subject matter instead.  So, here it goes.

Goal – make Silverlight button that has rounded corners using Blend

Step by step how to:

  1. Create new Silverlight application
  2. Save it
  3. Now you should have Page.xaml open in Visual Studio
  4. Open the same application in Blend
  5. Open Page.xaml
  6. Add a button to it.  If Button control is not visible, click on Assets(>>) button, select button
  7. Now double-click on button in toolbar to add it to Page.xaml
  8. Right-click on the button, select Edit Control Parts (Template), then Edit a Copy.  This way we will retain preloaded template, but will only change small parts of it
  9. Type is key for newly create style, such as RoundedButtonStyle
  10. Select application for Define In option.  This way you can use this style for any button in application
  11. Now, you should have app.xaml open with button control visible
  12. Expand everything in Template tree in Objects and Timeline window
  13. Click on element called Background, set CornerRadius in Properties window to 10,10,10,10
  14. Click on element called BackgroundAnimation, set CornerRadius in Properties window to 10,10,10,10
  15. Click on element called BackgroundGradient , set RadiusX and RadiusY in Properties window to 10
  16. Click on element called DisabledVisualElement, set RadiusX and RadiusY in Properties window to 10
  17. Click on element called FocusVisualElement, set RadiusX and RadiusY in Properties window to 10
  18. Save all
  19. Flip back to Visual Studio and run the application
  20. You can now see your rounded button in action

Your XAML for the button should look something like this:

<Button Content="Button" Margin="5,10,5,0" Style="{StaticResource RoundedButtonStyle}"/>

If you have template set instead, just change the XAML to use the style

All done and easy as pie!

In this little excersize we did not change the look drastically.  To do that instead of choosing edit a copy in step 8, choose Create Empty.  Now you will need to add visual elements yourself.  For a quick and dirty rounded button from scratch, add a rectangle and set Radius X and Y to the values of your liking.  This of course will not give you mouse over effects, disabled and focus effect etc…  You will still need to code those using visual states.  You can see those in Interaction window if you click on a button.  If you do not see the states, you may need to click on little drop down on top of the screen and choose Edit Control Parts –> Edit Template

Please feel free to ask questions if you cannot find a particular option.


  1. Hi,

    I followed your instructions but I have no rounded corners in the grid that contains BackgroundAnimation and BackgroundGradient; the grid has a Background binded to {TemplateBinding Background} that by default is black.

    How can I make it transparent in order to have rounded corners?

  2. Hi,

    sorry, I did not understand your last comment “You can set that on the border it will have corner radius”. Could you please elaborate a little bit more what to do where. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *