Here in this article I am going to show how a canvas and it's object are very usefull to make a design better.
XAML is the code name for Avalon, Longhorn's new markup language. When we go to design our application using XAML then here we have to use many objects, then here in XAML we find canvas. A Canvas acts as a wrapper for multiple objects. Here in this application, Rectangle and ellipse, I am using as a object 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 the good knowledge of properties of these objects. We use every object with it's appropriate property as we 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, so we have to use canvas here:
<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 concentrate full on position and size of object. Because position plays an important role in good design. For position and size we have height, width,left right,top, bottom property of objects.
We can design more interactive our design by using other property Like as 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 image by using property like as in this:
<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 their object to make a design. By using canvas and their object we can make many more good design.