Книга: C# 2008 Programmer

Understanding XAML

Understanding XAML

In this section, you see how to create the user interface of a Silverlight application using the Extensible Application Markup Language (XAML).

Using Notepad, create the following XAML file; name it UI.xaml and save it in C:Silverlight.

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Height="200" Width="200"
  Stroke="Black"
  StrokeThickness="10"
  Fill="Yellow"/>
 <Rectangle
  Canvas.Left="80"
  Canvas.Top="80"
  Height="200"
  Width="200"
  Stroke="Black"
  StrokeThickness="10"
  Fill="LightBlue"/>
</Canvas>

Double-click on Default.html now to load it in the web browser. Figure 19-4 shows the output.

Figure 19-4

This XAML file contains two elements, <Ellipse> and <Rectangle>, which display an ellipse and a rectangle, respectively, on the page. Both elements are embedded within a Canvas control.

The Canvas control (every Silverlight application has at least one Canvas control) is designed to contain and position other controls and elements. 

To define the positioning of controls within the Canvas control, you use the Canvas.Left and Canvas.Top attributes. The z order of objects embedded within a Canvas object is determined by the sequence in which they are declared. As the previous section shows, the <Rectangle> element is defined after the <Ellipse> element, and hence it overlaps the <Ellipse> element. However, you can override this default ordering by specifying the ZIndex attribute, as the following example shows.

Edit the UI.xaml file created in the previous section, and add the Canvas.ZIndex attribute for both the <Ellipse> and <Rectangle> elements:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.ZIndex="2"
  Height="200" Width="200"
  Stroke="Black"
  StrokeThickness="10"
  Fill="Yellow"/>
 <Rectangle
  Canvas.ZIndex="1"
  Canvas.Left="80"
  Canvas.Top="80"
  Height="200" Width="200"
  Stroke="Black"
  StrokeThickness="10"
  Fill="LightBlue"/>
</Canvas>

Reload the Default.html file in the web browser, and notice that the ellipse is now on top of the rectangle (see Figure 19-5).

Figure 19-5

You can also nest Canvas controls within one another. Edit the UI.xaml file created earlier and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Canvas
  Canvas.Left="80" Canvas.Top="80"
  Height="250" Width="250"
  Background="lightgreen">
  <Ellipse
   Canvas.ZIndex="2"
   Canvas.Left="10" Canvas.Top="10"
   Height="200" Width="200"
   Stroke="Black"
   StrokeThickness="10"
   Fill="Yellow"/>
 </Canvas>
</Canvas>

Reload the Default.html file in the web browser, and observe the changes (see Figure 19-6).

Figure 19-6

One of the key capabilities of Silverlight is the support for drawing objects of different shapes and sizes. Silverlight provides the following basic shape elements:

? Rectangle

? Ellipse

? Line

? Polygon

? Polyline

A <Rectangle> element draws a rectangle (or square) with optional rounded corners. To specify rounded corners, use the RadiusX and RadiusY attributes. Edit the UI.xaml file created in the previous section and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Rectangle
  Canvas.Left="10" Canvas.Top="10"
  Height="100" Width="200"
  Stroke="Black"
  StrokeThickness="10"
  Fill="Yellow"
  RadiusX="10"
  RadiusY="10"/>
 <Rectangle
  Canvas.Left="60" Canvas.Top="60"
  Height="200" Width="180"
  Stroke="Black"
  StrokeThickness="10"
  Fill="LightBlue"
  RadiusX="30"
  RadiusY="30"/>
</Canvas>

Reload Default.html in the web browser. Figure 19-7 shows the output.

Figure 19-7

A <Line> element draws a line on the Canvas control. Edit the UI.xaml file created in the previous section and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Line X1="10" Y1="10" X2="100" Y2="180"
  Stroke="black" StrokeThickness="5"/>
 <Line X1="100" Y1="10" X2="10" Y2="180"
  Stroke="red" StrokeThickness="10"/>
</Canvas>

Reload the Default.html file in the web browser, and observe the output (see Figure 19-8).

Figure 19-8 

An <Ellipse> element draws a circle (or oval) on the Canvas control. Edit the UI.xaml file created in the previous section, and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.Left="30" Canvas.Top="30" Height="60" Width="60"
  Stroke="Black" StrokeThickness="10" Fill="Pink"/>
 <Ellipse
  Canvas.Left="200" Canvas.Top="30" Height="60" Width="60"
  Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
 <Ellipse
  Canvas.Left="20" Canvas.Top="100" Height="70" Width="250"
 Stroke="Black" StrokeThickness="10" Fill="LightGreen"/>
</Canvas>

Reload Default.html in the web browser. Figure 19-9 shows the output.

Figure 19-9 

A <Polygon> element draws a shape with arbitrary number of sides. Edit UI.xaml again, replacing its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Polygon Points="100,10 10,160 190,160"
  Stroke="Yellow" StrokeThickness="5" Fill="Red"/>
</Canvas>

Reload Default.html in the web browser to see the result (see Figure 19-10).

Figure 19-10 

A <Polyline> element draws a series of connected lines. Edit the UI.xaml file and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Polyline Points="100,10 10,160 210,160 120,10"
  Stroke="Black" StrokeThickness="8"/>
</Canvas>

Reload Default.html in the web browser, and observe the output (see Figure 19-11).

Figure 19-11

The Fill attribute that you have seen in many of the previous examples fills (paints) a shape with a solid color. However, the fill is not restricted to solid colors. Silverlight supports various ways to paint a shape:

? SolidColorBrush

? LinearGradientBrush

? RadialGradientBrush

? ImageBrush

The <SolidColorBrush> element paints an area with a solid color. Edit the UI.xaml file created in the previous section, and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.Left="10" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10" Fill="Yellow"/>
 <Ellipse
  Canvas.Left="120" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10"
  Fill="#A3FC96"/> <!-- 6-digit hexadecimal -->
 <Ellipse
  Canvas.Left="10" Canvas.Top="120"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10"
  Fill="#A3FC96FF"/>
 <!-- 6-digit hexadecimal + 2-digit for alpha/opacity value -->
 <Ellipse
  Canvas.Left="120" Canvas.Top="120"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <SolidColorBrush Color="LightBlue"/>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

In this example, the Fill attribute specifies the solid color to use to fill up the particular element. Reload the Default.html file in the web browser, and observe the output in your browser (see Figure 19-12).

Figure 19-12

The LinearGradientBrush element paints an area with a linear gradient. Edit the UI.xaml file again, replacing its content with the following:

<Canvas
 xmlns=http://schemas.microsoft.com/client/2007
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.Left="10" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <LinearGradientBrush>
    <!-- fill is diagonal by default -->
    <GradientStop Color="Yellow" Offset="0.25"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="0.75"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left="120" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <!-- fill is horizontal -->
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
    <GradientStop Color="Yellow" Offset="0.25"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="0.75"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

Here you used the <Ellipse.Fill> element to fill the each ellipse shapes with a <LinearGradientBrush> element. Reload the Default.html file in the web browser. Figure 19-13 shows the output.

Figure 19-13 

The <RadialGradientBrush> element paints an area with a radial gradient. Edit the UI.xaml file, and replace its content with the following:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.Left="10" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <RadialGradientBrush>
    <GradientStop Color="Yellow" Offset="0.25"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="0.75"/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left="120" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <RadialGradientBrush GradientOrigin="0.5,0">
    <GradientStop Color="Yellow" Offset="0.25"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="0.75"/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

Reload the Default.html file in the web browser, and observe the output (see Figure 19-14).

Figure 19-14 

The <ImageBrush> element paints an area with an image. Assuming that you have the image shown in Figure 19-15 saved as C:SilverlightUSFlag.jpg, edit the UI.xaml file created, and replace its content with the following:

Figure 19-15

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
  Canvas.Left="10" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <ImageBrush ImageSource="USFlag.jpg"/>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left="120" Canvas.Top="10"
  Height="100" Width="100"
  Stroke="Black" StrokeThickness="10">
  <Ellipse.Fill>
   <ImageBrush ImageSource="USFlag.jpg" Stretch="Uniform"/>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

Reload Default.html in the web browser to view the output (see Figure 19-16).

Figure 19-16

Оглавление книги