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:

1. create a new class in your project and name it ClippingBehavior.cs
2. copy all the code in this text file into your class, replacing the ClippingBehavior class that was auto-generated
3. 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.
4. Add “using System.Windows.Interactivity;” to your ClippingBehavior.cs references.
5. 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.

 This tutorial derives from the general “How to Style the ComboBox” set of tutorials.

First let’s make sure you’re in the right place. In this tutorial, we’re going to style the comboBox drop down (also known as the ComboBox popup) seen highlighted in red below.

We will not be styling the items inside the dropdown (highlighted in blue). You can learn how to do that here.

So… let’s just go after some of the basics in styling the dropdown. We’ll give it a new background, a new border and we’ll round the edges to make it just a little more bubbly.

To start out, we’ll need to get to our comboBox control template, so right click on the comboBox in the Objects and Timeline window and go to “Edit Control Parts (Template) -> Edit a Copy…”

Name it something you like and we’re on our way. 

We’ll be editing the PART_Popup. Whatever you do, don’t change the name to this sucker. Whenever you see a “PART_Something”, it is a necessary part of that specific control (hence the naming convention).

The ComboBox dropdown (which we’ll be calling a popup for the remainder of this post)  is made up of a low cost drop shadow (see more on that here), a border, a scrollviewer and the itemsPresenter.

Most of the standard styling we might want to do is probably going to happen in the Border titled DropDownBorder. We can alter the background and the border brushes easily enough by just changing them in the Properties window. But you may notice some quirky behavior from our scrollviewer when we change the CornerRadius. Below, I’ve changed the CornerRadius to “0,0,10,10” and we can see that we lose part of the corner under the scrollviewer.

We can solve this easily enough by adding some padding through the Border. Below I’ve added a padding of “0,0,2,6“.

Better, but not really ideal. In a perfect world, we would be able to say that the border us able to cut off its content in that nice pretty rounded manner.  (If anyone knows how to do that… let me know, I haven’t given it hours of thought yet, but I’d love to know). In this case, however, this sub-optimization is the price we’re going to have to pay if we don’t want to have to go in and mess with the scrollbar style and template.