Create Shapes in Windows Store Apps

Introduction

Today we are going to explain how to draw shapes in Windows Store apps using XAML. In this example we are discussing various types of shapes, such as Ellipse, Line, Rectangle, Polygon etc. To create a shape we must define various types of shape properties such as Height, Width, Fill etc.

Ellipse

An Ellipse is a shape with a curved perimeter. To create a basic Ellipse shape we define a Width, Height, and a Brush for the Fill.

<Ellipse Fill="SkyBlue" Height="200" Width="200" Stroke="Black" />

 

Rectangle

A Rectangle is a four-sided shape with its opposite sides being equal. To create a Rectangle shape we define a Width, a Height, and a Fill.

<Rectangle Fill="RosyBrown" Width="250" Height="120 Stroke="Black" StrokeThickness="2" RadiusX="50" RadiusY="10" />

 

Polygon

A Polygon is a shape with a boundary defined by an arbitrary number of points. The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. The Points property defines the collection of points that make up the boundary.

<Polygon Fill="SteelBlue" Points="10,200,60,140,130,140,180,200" />

 

Line

A Line is simply a line drawn between two points in coordinate space. A Line ignores any value provided for Fill, because it has no interior space.

<Line X1="0" Y1="0" X2="50" Y2="50" Width="100" Stroke="Black" StrokeThickness="5" Margin="25, 30, 25, 25" />

 

Polyline

A Polyline is similar to a Polygon in that the boundary of the shape is defined by a set of points, except the last point in a Polyline is not connected to the first point.

<Polyline Stroke="Black" StrokeThickness="5" Points="10,200,60,140,130,140,180,200" />

   

Path

A Path is the most versatile Shape because you can use it to define an arbitrary geometry. But with this versatility comes complexity.

<Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 100,200 C 100,25 400,350 400,175 H 280" />