Working with Canvas in XAML Silverlight
Introduction
The
entire Silverlight application moves around the properties and events. We need
to set-up the properties of element and attach event handler to their events to
play. Ok...let’s talk about the topic that is Canvas and its properties. First
define, what’s this?
We may
define this as, it’s a container that contains many child elements like
rectangle, text blocks etc but remember it can’t contain another canvas. Look
at the screenshot below, it has five rectangles and each of them is aligned
through its Canvas.Left and Canvas.Top properties.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.MainPage"
Width="304"
Height="304">
<Canvas
Background="Magenta">
<Rectangle
Canvas.Left="2" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="102" Canvas.Top="102"
Height="100" Width="100"
Stroke="Yellow"
StrokeThickness="5"
Fill="White"/>
<Rectangle
Canvas.Left="202" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="202" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="2" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
</Canvas>
</UserControl>
Above canvas has one attribute:
Background: It is a brush; in this case we use a plain ‘Magenta’
color to paint the background of the Canvas.
Above canvas also have five children elements:
Rectangle: It is simply a shape which is drawn inside canvas; it
can’t take place without any container. It has also following attributes:
Ø Canvas.Left or
Canvas.Top: It specifies the position of control with respect to Canvas
location. Canvas.Left=”2” means leaving 2 pixels from left and Canvas.Top=”2”
means leaving 2 pixels from top. If we apply same margin for another control
then it will overlap one another, look at below:
Canvas Background
Implementation
Canvas is container so we can apply images or gradient color as
its background. Let’s apply image to its background. If you wish to apply
image, add any image to Project Explorer. Remember to upload image in
Silverlight Application root not in Silverlight Application Website root. Let’s
apply image,
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.MainPage"
Width="304"
Height="304">
<Canvas>
<Rectangle
Canvas.Left="2" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="102" Canvas.Top="102"
Height="100" Width="100"
Stroke="Yellow"
StrokeThickness="5"
Fill="White"/>
<Rectangle
Canvas.Left="202" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="202" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="2" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Canvas.Background>
<ImageBrush ImageSource="image.jpg" />
</Canvas.Background>
</Canvas>
</UserControl>
Remember
to delete background color before applying image because there is only single
scope of background either use it by image or color/gradient.
Now,
let’s apply gradient to Canvas but delete image before proceeding,
I
accomplice this using properties explorer of Canvas and generated code is as
follows:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.MainPage"
Width="304"
Height="304">
<Canvas>
<Rectangle
Canvas.Left="2" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="102" Canvas.Top="102"
Height="100" Width="100"
Stroke="Yellow"
StrokeThickness="5"
Fill="White"/>
<Rectangle
Canvas.Left="202" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="202" Canvas.Top="2"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Rectangle
Canvas.Left="2" Canvas.Top="202"
Height="100" Width="100"
Stroke="Green"
StrokeThickness="5"
Fill="Red"/>
<Canvas.Background>
<RadialGradientBrush>
<GradientStop
Color="Orange" Offset="0.22"/>
<GradientStop
Color="Green" Offset="0.959"/>
<GradientStop
Color="Orange" Offset="0.588"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
</UserControl>
That’s
all about the Canvas, be tuned for next post.
Comments
Post a Comment