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.