Silverlight Buttons with Rounded Corners (The Super Easy Way)
Download the “Silverlight Buttons With Rounded Corners” project files
This is a really silly but effective way of giving a button rounded corners without having to create a custom control template for that Button.
First, install Pete Blois’ Expression Blend Samples. It’s a set of Behaviors and Triggers for Blend. For reasons I don’t really understand, these don’t automatically show up in my Blend Behaviors list, so if you have the same problem (or if you don’t want to install all the behaviors) follow these steps:
- create a new class in your project and name it ClippingBehavior.cs
- copy all the code in this text file into your class, replacing the ClippingBehavior class that was auto-generated
- drag a behavior onto your canvas and delete it. This is by far the quickest and easiest way of getting the appropriate references added to your project. Sad but true.
- Add “using System.Windows.Interactivity;” to your ClippingBehavior.cs references.
- Hit F5
OK… with the behaviors added into Blend Assets menu, create a Border with the rounded corners you want your button to have. In order to show that this is pretty flexible, I gave my border a CornerRadius of “20,2,20,2”
Now, put a Grid inside of that border and a button inside of the grid. Give your Button has a negative margin at least equal to the largest CornerRadius margin. It should look something like this:
Now, go to the Behaviors section in Blend and choose ClippingBehavior and drag it onto the Grid.
Give it a Margin equal to your BorderThickness and give it the same CornerRadius as your Border.
One last thing, make sure that your Border has the same BorderBrush as your Button. You can do that by clicking on the box next to the BorderBrush property and going to “DataBinding”.
Select the “Element Property” tab, find the button you’re giving rounded corners and select the “BorderBrush” property from the Button.
And you’re good to go. Now this doesn’t really give the actual Button rounded corners, but it sure does look that way.
And you’ve saved yourself a good deal of heartache (and a whole ton of generated code) because you don’t have to create a whole new Button template just to change some corners on one or two buttons.
