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

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System