Blog
The 'Shapes' of XAML - Rectangles & Ellipses
By Ken Getz | January 09, 2013
Although you may not agree at first, you have many reasons to need to learn about XAML shapes, paths, and geometries. You'll need to work with drawing fundamentals if you intend to:
- Create customized art
- Create custom controls
- Add interactivity to graphics
- Use animation
- Create any non-standard user interface
In this article, we'll look at Rectangle and Ellipse Shapes!
Rectangle and Ellipse Shapes
Shapes don't get much simpler than those provided by the Rectangle and Ellipse classes. To use these shapes, supply any or all of the following properties:
- Height and Width to define the dimensions of the shape. (Using equal values for these properties creates a square or a circle, as opposed to a rectangle or an ellipse.)
- Stroke and Fill to define the visual characteristics of the shape.
- MinHeight and MinWidth to determine the minimum size in a dynamic, sizing container.
- Margin to determine the space around the shape.
- HorizontalAlignment and VerticalAlignment to determine the positioning of the shape within its container.
Select Rectangles and Ellipses from the main tab to view the output from the sample page, RectanglesAndEllipses.xaml, as shown in the Figure below. The following markup renders the output shown in the Figure below:
<StackPanel HorizontalAlignment="Left"Width="400"><Rectangle Fill="Yellow"Height="100"Stroke="Black"StrokeThickness="2"Margin="5"Width="200"></Rectangle><Ellipse Fill="Red"Height="100"Stroke="Black"StrokeThickness="2"Margin="5"Width="200"></Ellipse><Ellipse Fill="Blue"Height="100"Stroke="Black"StrokeThickness="2"Margin="5"Width="100"></Ellipse></StackPanel>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.
