WPF Web Based

Before you really start working in WPF you first should be aware of the controls those are used as container controls in WPF. Actually, each and every control in WPF is a container control. But Canvas and Grid are the two main controls those are used as container in most of the cases. This section will explain about Canvas control in detail.

Canvas is a Container

Like all other controls, Canvas is a container control in WPF. It can have 'n' number of children of it. If you have added Buttons, TextBlocks, Textboxes or any other controls inside Canvas then those controls are children of canvas, at the same time one can say that Canvas is a parent control for them. To add a Canvas in your XAML code, use the following piece of code.

XAML Code:

<Canvas Name="cnvMain" Background="Red" Height="300" Width="300">
</Canvas>

C# Code:

Canvas cnvMain = New Canvas();
cnvMain.Height = 300;
cnvMain.Width = 300;
cnvMain.Background = New SolidColorBrush(Colors.Red);

Since, page does not have children property, add above Canvas in the page using following Code.

pgMain.Content = cnvMain;

If you have used canvas as a container control, all the controls those are added as child controls of Canvas should have main two properties.

1. Canvas.Top
2. Canvas.Left

These two properties are used for the proper positioning of the controls which are inside the Canvas. These properties (Left and Top) are related to the parent canvas for any control. An example will help you understand this easily.

If you want to add a TextBlock inside the canvas, you can add it using Following Code.

XAML Code:

<Canvas Name="cnvMain" Background="Red" Height="300" Width="300">
<TextBlock Name="tbTest" Height="40" Width="100" Text="Hello">
</TextBlock>
</Canvas>

C# Code:

TextBlock tbTest = new TextBlock();
tbTest.Height = 40;
tbTest.Width = 100;
tbTest.Text = "Hello";
cnvMain.Children.Add(tbTest);

Check output of the above code. You will see that TextBlock having Text "Hello" Would appear in the Top Left Corner of the Canvas.

Now, if you want to set the position of this control inside the Canvas, you can use Canvas.Left and Canvas.Top property in the XAML code. If you want to set these properties runtime then, you must use following piece of code for that,

tbTest.SetValue(Canvas.LeftProperty, 30.0);
tbTest.SetValue(Canvas.TopProperty, 100.0);

These properties are Attached or dependent properties, means those are dependent upon their parent control. To set such properties we should use, SetValue() function.

These are some of the basic properties. You can use properties which are useful for you. One very important feature provided by Visual Studio is intellisence. Use it and explore the properties related to the controls.

Example:

<Page x:Class="WpfBrowserApplication2.CANVAS"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CANVAS">
<Grid>
<Grid>
<Border Background="Plum" CornerRadius="20"
    BorderBrush="Yellow" BorderThickness="2">
<Canvas>
<TextBox Background="PaleGreen" Grid.Row="0" Grid.Column="0"
         Canvas.Top="10" Canvas.Left="10" Height="30"
		 FontSize="15" Foreground="white" Canvas Layout 1
</TextBox>
<TextBox Background="AliceBlue" Grid.Row="1" Grid.Column="0"
 Canvas.Top="50" Canvas.Left="120" Height="30" FontSize="15"
 Foreground="white"> Canvas Layout 2</TextBox>
<TextBox Background="White" Grid.Row="1" Grid.Column="1"
     Canvas.Top="115" Canvas.Right="70" Height="30" 
      FontSize="15" Foreground="Red">Canvas Layout 3
</TextBox>
<TextBox Background="Green" Grid.Row="1" Grid.Column="1"
  Canvas.Bottom="50" Canvas.Right="120" Height="30" FontSize="15"
   Foreground="white">Canvas Layout 4
</TextBox>
<TextBox Background="OrangeRed" Grid.Row="0" Grid.Column="1"
 Canvas.Bottom="10" Canvas.Right="10" Height="30" FontSize="15"
  Foreground="white">Canvas Layout 5
</TextBox>
</Canvas>
</Border>
</Grid>
</Grid>
</Page>

Output: