Canvas Control in WPF using VB.NET
In this article we will learn how to use canvas control in WPF.
In this article we will learn how to use canvas control in WPF.
Canvas Control
Canvas control is a simplest layout control. canvas control are used to defines a area within which you can place other controls by specifying the x and y coordinate position. When controls are placed within a Canvas, the x and y coordinates must be specified for each control using the attributes Canvas.Left and Canvas.Top.
Properties - These are the following properties of the canvas control.
Figure 1.
Height - Gets the rendered height of this element.
Width - Gets the rendered width of this element.
Background - Gets or sets a Brush that is used to fill the area between the borders of a Panel.
VerticalAlignment - Gets or sets the vertical alignment characteristics applied to this element when it is composed within a parent element such as a panel or items control.
Fill - fill property are used to fill the color.
For example
Drag a canvas and four Rectangle control on the form. The form looks like this.
Figure 2.
Now select the Rectangle controls and set the properties of every Rectangle.
Canvas.Left=25
Canvas.Top=40
Fill=green
Width=100
Height=100
The form looks like this after set the property of each Rectangle control.
Figure 3.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Canvas Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Canvas1"VerticalAlignment="Top" Width="465" Background="Blue">
<Rectangle Canvas.Left="25" Canvas.Top="40" Height="100" Name="Rectangle1"Stroke="Black" Width="109" Fill="DarkRed" />
<Rectangle Canvas.Left="50" Canvas.Top="65" Height="100" Name="Rectangle2"Stroke="Black" Width="106" Fill="Aqua" />
<Rectangle Canvas.Left="75" Canvas.Top="90" Height="100" Name="Rectangle3"Stroke="Black" Width="95" Fill="DarkGreen" />
<Rectangle Canvas.Left="100" Canvas.Top="105" Height="100" Name="Rectangle4"Stroke="Black" Width="97" Fill="Chartreuse" />
</Canvas>
</Grid>
</Window>
Now run the application and test it.
Figure 4.