Rectangle

Rectangle does what its name suggests. As with any shape, it can be drawn either filled in, as an outline, or both filled in and outlined. As well as drawing a normal rectangle, it can also draw one with rounded corners.

Rectangle doesn't provide any properties for setting its location. It relies on the same layout mechanisms as any other UI element. The location is determined by the containing panel. The width and height can either be set automatically by the parent, or they can be set explicitly using the standard layout properties, Width and Height.

Example 13-6 shows a Rectangle on a Canvas panel. Here the Width and Height have been set explicitly, and the location has been specified using the attached Canvas.Left and Canvas.Top properties.

Example 13-6. Rectangle with explicit size and position <Canvas>

<Rectangle Fill="Yellow" Stroke="Black"

Canvas.Left="30" Canvas.Top="10" Width="100" Height="20" />

Example 13-7 shows the other approach; none of the rectangles has its location or size set explicitly. They are relying on the containing Grid to do this. Figure 13-11 shows the result.

Example 13-7. Rectangles with size and position controlled by parent <Grid>

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions>

<Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>

<Rectangle Grid.Column="0" Grid.Row="0" Fill="LightGray" />

<Rectangle Grid.Column="1" Grid.Row="0" Fill="Black" />

<Rectangle Grid.Column="0" Grid.Row="1" Fill="DarkGray" />

<Rectangle Grid.Column="1" Grid.Row="1" Fill="White" />

Figure 13-11. Rectangles arranged by a Grid

A Rectangle will usually be aligned with the coordinate system of its parent panel. This means that its edges will normally be horizontal and vertical, although if the parent panel has been rotated, Rectangle will of course be rotated along with it. If you want to rotate a Rectangle relative to its containing panel, you can use the RenderTransform property available on all user interface elements, as Example 13-8 shows.

Example 13-8. Rotating rectangles <Canvas>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Indigo" />

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Violet"> <Rectangle.RenderTransform>

<RotateTransform Angle="45" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Blue"> <Rectangle.RenderTransform>

<RotateTransform Angle="90" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Cyan"> <Rectangle.RenderTransform>

<RotateTransform Angle="135" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Green"> <Rectangle.RenderTransform>

<RotateTransform Angle="180" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Yellow"> <Rectangle.RenderTransform>

<RotateTransform Angle="225" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Orange">

Example 13-8. Rotating rectangles (continued)

<Rectangle.RenderTransform>

<RotateTransform Angle="270" /> </Rectangle.RenderTransform>

</Rectangle>

<Rectangle Canvas.Left="50" Canvas.Top="50" Width="40" Height="10" Fill="Red"> <Rectangle.RenderTransform>

<RotateTransform Angle="315" /> </Rectangle.RenderTransform> </Rectangle> </Canvas>

This uses RenderTransform to rotate a series of rectangles. Figure 13-12 shows the result.

Figure 13-12. Rotated rectangles

To draw a rectangle with rounded corners, use the RadiusX and RadiusY properties, as Example 13-9 illustrates.

Example 13-9. Rounded rectangle

<Rectangle Width="100" Height="50" Fill="Black" RadiusX="30" RadiusY="20" /> Figure 13-13 shows the result.

Figure 13-13. Rectangle with rounded corners

Figure 13-13. Rectangle with rounded corners

Ellipse is similar to Rectangle. Obviously it draws an ellipse rather than a rectangle, but the size, location, rotation, fill, and stroke of an Ellipse are controlled in exactly the same way as for a Rectangle, as Example 13-10 shows.

Example 13-10. Ellipse

<Ellipse Width="100" Height="50" Fill="Yellow" Stroke="Black" /> Figure 13-14 shows the result.

Was this article helpful?

0 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook


Post a comment