Blog
XAML Shapes: Round Those Corners
By Ken Getz | January 11, 2013
Once you've created a rectangle with XAML, you can also round the corners!
The Rectangle class adds RadiusX and RadiusY properties, as well, which control the rounding of the rectangle's corners. The properties define an ellipse that describes the rounding of the corners-the RadiusX property controls the width of the ellipse, and the RadiusY property controls the height. The minimum value for these properties is 0, and the maximum value is half the width and height of the rectangle (values of this size and greater simply result in an ellipse).
The page, RoundedCorners.xaml, displays the results shown in the Figure below. This example demonstrates different values for the RadiusX and RadiusY properties, and shows how they affect the shape of a rectangle.
<Rectangle Width="200"Height="100"RadiusX="10"RadiusY="10"Stroke="Black"StrokeThickness="2"Margin="5,10,5,5"Fill="Red" /><Rectangle Width="200" Height="100"RadiusX="50"RadiusY="10"Stroke="Black"StrokeThickness="2"Margin="5"Fill="Green" /><Rectangle Width="200"Height="100"RadiusX="20"RadiusY="50"Stroke="Black"StrokeThickness="2"Margin="5"Fill="Yellow" /><Rectangle Width="200"Height="100"RadiusX="100"RadiusY="50"Stroke="Black"StrokeThickness="2"Margin="5"Fill="Blue" />This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
