Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Working with canvas in silverlight
Posted By Sarin on Apr 01, 2012     RSS Feeds     Latest Hinduism news

Canvas in Silverlight The Canvas Panel

The  Canvas panel is a basic layout control that allows you to position Silverlight elements using explicit
Co-ordinates relative to the canvas location.  
Elements inside a Canvas are positioned using a XAML feature called "Attached Properties" - which allow you to specify a control's position relative to its immediate parent Canvas control's Left, Top, Right or Bottom coordinates.  
Let’s build a quick example on using the  Canvas panel.
1. Open Visual Studio 2010 and create a new Silverlight application called Canvas.  
2.  In MainPage.xaml file, within the main Grid element, add a Canvas element. Assign it a Width property of 300 and a Height property of 200.To view the Canvas panel separately in the
Application set the background color to BurlyWood. The following XAML adds this Canvas:
  <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Background="BurlyWood"  Width="300" Height="200">         
At this point, You will see a very simple rectangle with background color as ‘BurlyWood’.

Let’s add a Label and textbox to this Canvas panel.  Note that texblock in Silverlight is same as label in
<Grid x:Name="LayoutRoot" Background="White">
        <Canvas Background="BurlyWood"  Width="300" Height="200">
            <TextBlock Width="100" Canvas.Top="20" Height="30" Text="Label 1" />
            <Button Width="100" Height="30" Content="Button 2" Canvas.Top="20" Canvas.Left="80" />

As you can see, both textblock and button control’s position is controlled by top and left property of the parent canvas.
Based on the above concepts, lets add more control to our parent canvas control

As you can see above, we have added two child canvases inside parent canvas. Each of this child canvas position is determined by left and right property of parent canvas control. Also, we have controls inside the child canvas whose positions are determined by the child canvas control and not by the parent child canvas. I.e. Text block and button control have taken their position on the basis of their immediate parent canvas control.
Also, for the second child canvas control, we have set the flow direction from right to left. The effect is, textblock and button positions are determined from the right border of the canvas rather than the left border of the canvas. I.e. Canvas. Left is actually working like canvas. Right.  
Also we have the option to set opacity to define the transparency of your canvas.

Some Tips and Tricks with Canvas  
Formatting a Canvas
The Background property of the Canvas sets the background colors of a Canvas. You may use any brush to fill the border. For this example, we use a linear gradient brush to draw the background of a Canvas.  
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                        <GradientStop Color="Blue" Offset="0.1" />
                        <GradientStop Color="Orange" Offset="0.25" />
                        <GradientStop Color="Green" Offset="0.75" />
                        <GradientStop Color="Red" Offset="1.0" />
LinearGradientBrush StartPoint co-ordinate is 0,0 and endpoint is 1,1. So, the brush will start rendering diagonally from topleft to rightbottom. If the canvas flowdirection is from right to left, then the brush will start rendering diagonally from topright to leftbottom

Setting Image as Background of a Canvas
We can set an image as the Background of the Canvas.
    <ImageBrush ImageSource="Flowers.jpg" />
For this to work, make sure that your image build action is set to resource. (goto image properties in your Silverlight application and set build action to resource)

Filling the Entire Browser Window with Your Application
By default, in a new Silverlight project, the root UserControl object is set to a width of 400 and a height of 300. In some cases, you may wish your Silverlight application to take up the entire window of your browser, and to resize as the browser is resized. This is done very easily within Silverlight. When you wish for the width and height to be set to 100%, simply omit the element’s Height and Width attributes.
As an example, the following source has been adjusted for the Canvas panel and the Silverlight
application to take up the entire browser:

<UserControl x:Class="Canvas.MainPage"
    <Grid x:Name="LayoutRoot" Background="Aqua">

Pros and Cons of canvas:
While the Canvas is very useful for scenarios where the UI elements contained within it never moves nor changes but it tends not to be very flexible as you add more and more controls into it or deals with scenarios where the UI needs to resize or move.  In cases like these you end up having to manually writing code for various events to move things around inside the Canvas (which is very time-consuming).  A better solution for these dynamic scenarios is to use an alternative layout panel that has built-in semantics to-do this for you - like the Stack Panel and Grid.


Share this to your friends. One of your friend is waiting for your share.
Related Articles
Origin of word Hindu
What is Silverlight,its features and how it works
Science in hinduism-Embryology in Garbhopanishad and Charaka samhita
Working with silver light datagrid
Performance and optimization tips-part 2
Do plants feel pain or sufferings
Calling silverlight methods from javascript
JQuery FAQ and Jquery Effects
How Silverlight works internally
Ways of implementing AJAX

Post Comment