DonXML and I were chatting recently and he was talking about a upcoming post about creating rounded edges with out tables. One of the nice things about XAML is that this is really easy to do. Below is a picture of a sample that I'm working on for the TreeView control. Here I've used two methods to create rounded edges. One's a hack and one is the correct way to do it.
In the hack I use a Rectangle element and a TextBlock together.
Stroke="Honeydew"
StrokeThickness="3"
RadiusX="20"
RadiusY="20"
Fill="CadetBlue"
Height="Auto"
Width="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="2"
Grid.Row="1"
Margin="3,3,3,3">
Grid.Column="2"
Grid.Row="1"
Foreground="Honeydew"
FontSize="20"
FontFamily="Segoe UI"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>Treeview w/ DataTemplate
You can create rounded corners with this model by using the RadiusX and RadiusY properties but, you'll have to watch out and mind your margins and padding . For example here in the TreeView element, this is necessary to make sure the edges of the TreeView control don't overlap on the Rectangle control.
…
The problem with the above method is that your content in the TextBlock example is overlaid (remember that XAML is like SVG in that it renders the elements in order). When you resize your window the text will not honor the "boundary" of the rectangle. And you'll get out of bounds text, as demonstrated below.
Here's the method of voodoo that you'll really want to use.
First, grab a chicken and swing it over your head three times. Just kidding. Don't do that, it'll make the chickens dizzy.
Instead enter the handy dandy Border element. Just slap that around your controls and add the CornerRadius property for magic rounded edges and you're off and running. Please notice that the TextBlock here is a child of the Border element and not a sibling. And another footnote here is that there is a Grid element wrapping all of this.
Background="Honeydew"
BorderBrush="CadetBlue"
BorderThickness="3"
CornerRadius="10"
Grid.Row="1"
Grid.Column="1"
Margin="3,3,3,3">
Grid.Column="1"
Grid.Row="1"
Foreground="CadetBlue"
FontSize="20"
FontFamily="Segoe UI"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>Treeview w/ XPath
So there you have it. Rounded sexy corners in your apps with one easy tag.
Enjoy.