Canvas Control in WPF using VB.NET

In this article we will learn how to use canvas control in WPF.
  • 2815

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.

c1.gif
 

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.

c2.gif
 

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.

c3.gif
 

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.

c4.gif
 

Figure 4. 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.