Drawing on a web page with XAML

Canvas, the container of your Web program, is at the same time an interface made up of widgets, the graphic components such as buttons, list, menus, etc which make the interface of an application, and also a surface on which we can draw in vectorial mode.

Configuring the Canvas

The Canvas has properties you can modify:

• Width: Width of the canvas.
• Height: Height of the canvas.
• Background: Color of the background.
• Opacity: Transparency level.

These properties must be distinguished from those of the ActiveX control that was defined in initialization script, as parameter of the CreateObject() function.

Example of Canvas

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Heigh="100"
  Width="200"
  Background="Blue">
</Canvas>

Drawing a rectangle

The graphic elements are inserted directly in the canvas like elements of interface. One can insert a button or insert a rectangle!

The position of objects is defined by properties of Canvas:
Canvas.Left: horizontal position in the canvas.
Canvas.Top: vertical position in the canvas.

The main properties of the rectangle object, common to other shapes are:

• Height: Height of the shape.
• Width: Width of the shape.
• Fill: Filling color.
• Stroke: Color of the contour.
• StrokeThickness: Thickness of the contour.

A rectangle has also special properties:

• RadiusX: Horizontal angle of rounded corner.
• RadiusY: Vertical angle of rounded corner.

Example:

<Rectangle
  Canvas.Top="20"
  Canvas.Left="30"
  Height="20"
  Width="50"
  Fill="Red"
  Stroke="Black"
  StrokeThickness="1" 
  RadiusX="4"
  RadiusY="6"
/>

The XAML code is in the rectangle.xaml file. (Saved under the name rectangle-xaml.txt).

More basic shapes

Line

To trace a line.
The properties are X1, X2, Y1, Y2 to define starting and ending points. The line is positionned in the Canvas like the rectangle with Canvas.Left and Canvas.Top.

Ellipse

To draw a circle or an ellipse.
The properties are those of the rectangle except the properties of corners. A circle will have same width and height.

Polygon

A closed figure with an arbitrary number of sides.
The figure is defined by a series of couple of integer values separated by a comma, the couples being delimited by a white space. This definition is assigned to the Points property.
Example:

<Polygone Points= " 10,10 30,10 30,20 30,10 10,10 "/>

Polyline

Series of lines connected but not necessarily a closed figure. Same attributes that the polygon.

Path

Represent a figure defined by points and curves.
The Data property is assigned a list of pairs of relative numbers possibly preceded by a prefix to define the form.

Displaying the rectangle given in example