Canvas object to designing XAML application in VB.NET

Canvas plays an important role in designing an application. We have to use many objects in designing, Canvas works as a wrapper for these object.
  • 2333

Here, in this article, I am going to show that, how a canvas and it's object play an important role to make a design better.

XAML is the code name for Avalon, Longhorn's new markup language. When we go for designing our application using XAML then here we have to use many objects, in the same mannner, in XAML we find canvas. A 
Canvas acts as a wrapper for multiple objects. Here, in the given application, rectangle and ellipse are used as objects of canvas. Each object has its own properties, specified as attributes. Some properties, such as Rectangle Width or CenterX, are specific to a particular kind of object. Others, such as Stroke, which outlines the object, are general presentational properties shared by most of the graphics we'll use. We should have a fine knowledge of  properties of these objects. We use every object with it's appropriate property as we require a need in our design.

Open a WPF application. Here, we find a XAML based window. Now we can start adding actual graphic elements.

Here, we will use many objects:

<Window x:Class="ellipseyellow.Window1"
Title="ellipseyellow" Height="310" Width="320"

    <Rectangle Width="300" Height="255" Fill="Green" Stroke="Black" Canvas.Left="6"    


    <Ellipse  Height="95" Width="150"  Fill="Pink"  Canvas.Left="75" Canvas.Top="80">






Figure 1: Showing Canvas and their object in use.

We can also use the PolygonPolyline, and Path elements to create more attractive structures. Here, for a better design, we have to fully concentrate on position and size of the object. Because position plays an important role in a good design. For position and size, we have height, width, left, right,top, bottom properties of objects.

We can design our design more interactive by using other properties, as described in this example:




<Window x:Class="canvasProp.Window1"



    Title="canvasProp" Height="290" Width="310"



    <Rectangle Width="296" Height="252" Fill="Green" Stroke="Black" Canvas.Left="3" Canvas.Top="3" StrokeThickness="5" RadiusX="30"RadiusY="20"></Rectangle>

    <Rectangle Width="100" Height="100" Fill="Yellow" Stroke="Blue" Canvas.Left="100" Canvas.Top="80"></Rectangle>





Figure 2: using more property of canvas object.


Now we can make more complicated images by using the properties alike:


<Window x:Class="canvasProp.Window1"



    Title="canvasProp" Height="290" Width="310"



    <Rectangle Width="296" Height="252" Fill="Green" Stroke="DarkKhaki" Canvas.Left="3" Canvas.Top="3" StrokeThickness="5" RadiusX="30"RadiusY="20"></Rectangle>

    <Ellipse  Height="95" Width="150"   Canvas.Left="75" Canvas.Top="80">



          <GradientStop Color="Red" Offset="0">


          <GradientStop Color="Blue" Offset="0.20"></GradientStop>

          <GradientStop Color="Orange" Offset="0.70"></GradientStop>

          <GradientStop Color="Aquamarine" Offset="0.90"></GradientStop>

          <GradientStop Color="Yellow" Offset="1"></GradientStop>











Figure 3: An image, generated by the canvas object Property.


These are the some example in which we used canvas and its objects to make a design complete or more interactive. By using canvas and their object we can make many more good design.


More Articles

© 2020 DotNetHeaven. All rights reserved.