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>
Figure 1: Showing Canvas and their object in use.
We can also use the Polygon, Polyline, 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>
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>
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.