XAML gives you the ability to draw shapes and
colors on the surface of the phone itself. While you might not imagine
doing much actual drawing, it is important for you to understand how
creating a design with the drawing primitives is important to the
overall XAML story. As you start to use controls, you will learn that
those controls are made up of more primitive elements, and when you want
to change the way controls and other elements look, you will have to
understand the drawing stack.
Shapes
The most basic drawing element is a Shape. The Shape element is a base class for a small number of shapes that are used for basic drawing. The basic shapes are listed below:
• Line
• Rectangle
• Ellipse
• Polygon
• Polyline
• Path
Each shape has basic attributes, such as Height, Width, Fill, and Stroke:
<Grid>
<Rectangle Width="100"
Height="100"
Fill="Blue" />
<Ellipse Width="200"
Height="50"
Stroke="Black" />
</Grid>
If you cannot compose the kind of shape you need with the first five shapes in the previous list, everything falls down to the Path shape. A Path is a powerful shape that can give you full power to design arbitrary shapes. The Path shape allows you to create open, closed, or compound shapes. The Path shape has a property called Data that specifies the elements of the shape. For example, you can specify a Path with an object graph, like so:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,50">
<BezierSegment Point1="50,0"
Point2="50,100"
Point3="100,50"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
By setting the Data attribute to a PathGeometry element that specifies a Path that contains a BezierSegment (from 0,50 to 100,50 with control points of 50,0 and 50,100 as the curves), you can draw a curved line, as shown in Figure 1.
Figure 1. Path explained
The Data property contains a shorthand notation to
simplify and shorten the size of the XAML. This shorthand is the same
type of information, but stored in a single string. For example, the
curve in Figure 1 can be simplified to:
<Path Stroke="Black"
Data="M 0,50 C 50,0 50,100 100,50" />
This has the same information in it but in a shortened form: Move to
the 0,50 position and do a Bezier curve using these three points.
Usually Paths are created with tools (e.g., Expression
Blend) as the process can get terse, but the process does allow for very
complex paths.
Brushes
In many of the examples so far, you have seen color names (e.g.,
black, red) used in XAML to indicate what color an object is displayed
with. In fact, those colors were a shortcut to creating an object called
a brush. Brushes are always used to paint surfaces (e.g., using fill,
stroke, and background brushes). Several types of brushes are available
to you, as shown in Table 1.
Table 1. Brush Types
Each property of a XAML element that accepts a brush object can take any of the different types of brushes.
Colors
XAML contains a set of built-in colors. You can use these 141 named colors to specify individual colors, like so:
<Grid>
<Rectangle Fill="Blue"
Stroke="Pink" />
</Grid>
In most cases, though, named colors end up being insufficient to
handle the basics of colors. Since millions of colors are available,
XAML needs a way to more effectively specify a color. XAML supports the
HTML convention of an RGB hexadecimal string, like so:
<Grid>
<Rectangle Fill="#0000FF"
Stroke="#FF0000" />
</Grid>
In this format, the pound symbol (#) is followed by a
set of hexadecimal numbers that represent the amount of red, green, and
blue being used. Both the six- and three-digit formats are supported
(e.g., #FF0000 is equivalent to #F00). In
addition, XAML extends the HTML syntax to include an eight-character
version. In the eight-character version, the first two characters
represent a hexadecimal number that indicates the alpha channel (or
level of opaqueness):
<Grid>
<Rectangle Fill="#800000FF"
Stroke="#C0FF0000" />
</Grid>
In this example, the Fill is roughly 50% transparent and the Stroke is approximately 75% opaque (or 25% transparent).
Text
For basic drawing of text, the TextBlock class is the right tool. The TextBlock
is a simple container for drawing text. It supports properties for
basic font choices such as size, family, weight, foreground color,
alignment, and so on:
<Grid>
<TextBlock Text="Hello World"
Foreground="White"
FontFamily="Segoe WP"
FontSize="18"
FontWeight="Bold"
FontStyle="Italic"
TextWrapping="Wrap"
TextAlignment="Center" />
</Grid>
Along with simple text, the TextBlock class also supports simple inline formatting using the LineBreak and Run constructs:
<Grid>
<TextBlock>
Hello World. <LineBreak />This
is the second line. The breaking of
the lines in the XAML are
<Run Foreground="Red">not significant</Run>.
</TextBlock>
</Grid>
A LineBreak indicates where line breaks are going to occur without regard to the TextWrapping property. A Run is used to wrap some piece of text that needs to be formatted differently than other parts of the TextBlock. The Run supports the basic properties that a TextBlock allows but only applies them to the text inside the Run element as shown above. The TextBlock
is not a control to handle any sort of rich text or HTML-level text
handling but will suffice in most cases for text manipulation.
