Every .xaml file must contain a canvas object and this servers as a root element.
All child elements can be declared as inner XML. Following are some important properties
that are very useful.
|
Background |
Specifies the background color of the canvas.
|
|
Canvas.Left |
Gets or sets the distance between the left side of the element from its parent element.
|
|
Canvas.Top |
Gets or Sets the distance between the top side of the element from its parent element.
|
|
Canvas.ZIndex |
Gets or sets the value of the Z-order object within the canvas.
|
|
Cursor |
Gets or sets the cursor that displays when Mouse pointer is over the canvas.
|
|
Height |
Gets or sets the height of the canvas object.
|
|
Width |
Gets or sets the width of the canvas object.
|
|
Name |
Gets or sets the unique name of the object.
|
|
Opacity |
Gets or sets the degree of the object's opacity (between 0 to 1.0 where 1.0 is the
full and 0 means transparent).
|
|
OpacityMask |
Gets or sets the brush used to alter the opacity of the regions of the object.
|
|
GetFocus |
Occurs when the object gets focus.
|
|
KeyDown |
Occurs when any key is pressed while the object has focus.
|
|
KeyUp |
Occurs when any key is released while the object has focus.
|
|
LostFocus |
Occurs when object looses the focus.
|
|
DEMO : Canvas Objects and its child objects
|
Show Source Code
|
This is a Simple canvas object with specified height and width.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="150" Fill="LightBlue" Stroke="Green"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
</Canvas>
|
|
Here you can see several child object inside the canvas object. By default, the ZIndex of the child element are determined in the sequence they are declared.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue" Stroke="Green"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen" Stroke="Blue"
StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink" Stroke="Red"
StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</Canvas>
|
|
Here the the same above code except that the ZIndex has been specified for all three objects. Notice the overlapping pattern of these three rectangles.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue"
Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen"
Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink"
Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</Canvas>
|
|
Below code demonstrate that you can declare many child canvas object inside a parent canvas object.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue"
Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen"
Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink"
Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</Canvas>
|
|