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.
  • 2072

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"
      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
      
Title="ellipseyellow" Height="310" Width="320"
      
>
      <Canvas

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

    </Rectangle>  

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

    </Ellipse


     </
Canvas>

   </Window>

 

untitled.JPG

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:

 

Window1.XAML

 

<Window x:Class="canvasProp.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    >

  <Canvas>

    <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>

        </Canvas>

</Window>
 

 

untitled1.JPG 

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"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    >

  <Canvas>

    <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">

      <Ellipse.Fill>

        <LinearGradientBrush>

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

          </GradientStop>

          <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>

        </LinearGradientBrush>

 

      </Ellipse.Fill>

 

    </Ellipse>

  </Canvas>

</Window>

 

 

untitled2.JPG

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

Summary:

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.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.