Working with the Canvas Panel
The Canvas type allows for absolute placement of content. It is best used when defining graphical content
(pie charts, bar charts, and so on) as you would not want image data to change position when resized.
Content within a Canvas does not scale when resized. Therefore, if you have UI widgets in a Canvas, you
may have undesirable font size issues.
The order in which elements are declared within a Canvas has no effect on placement. Positioning is
controlled via Top, Left, Right, and Bottom properties relative to the Canvas using attached-property syntax.
<Window x:Class = "FunWithPanels.Window1"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Fun with Panels" Height = "299" Width = "348">
<Canvas Background = "LightSteelBlue">
<TextBox Canvas.Left = "94" Canvas.Top = "153" Name = "txtColor"
Width = "193" Height = "25"/>
<TextBox Canvas.Left = "94" Canvas.Top = "60" Name = "txtPetName"
Width = "193" Height = "25"/>
<TextBox Canvas.Left = "94" Canvas.Top = "107" Name = "txtMake"
Width = "193" Height = "25"/>
<Label Canvas.Left = "17" Canvas.Top = "14"
Name = "lblInstructions" FontSize = "15">Enter Car
Information</Label>
<Label Canvas.Left = "17" Canvas.Top = "109"
Name = "lblColor">Color</Label>
<Label Canvas.Left = "17" Canvas.Top = "155"
Name = "lblMake">Pet Name</Label>
<Label Canvas.Left = "17" Canvas.Top = "60"
Name = "lblPetName">Make</Label>
<Button Canvas.Left = "212" Canvas.Top = "203" Name = "btnOK"
Width = "80">OK</Button>
</Canvas>
</Window>
Because the elements are wrapped in a Panel, they will remained exactly where they are placed them in the
Canvas. Therefore, notice that when this window is resized, items can easily be covered up.
The Canvas type allows for absolute placement of content. It is best used when defining graphical content
(pie charts, bar charts, and so on) as you would not want image data to change position when resized.
Content within a Canvas does not scale when resized. Therefore, if you have UI widgets in a Canvas, you
may have undesirable font size issues.
The order in which elements are declared within a Canvas has no effect on placement. Positioning is
controlled via Top, Left, Right, and Bottom properties relative to the Canvas using attached-property syntax.
<Window x:Class = "FunWithPanels.Window1"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Fun with Panels" Height = "299" Width = "348">
<Canvas Background = "LightSteelBlue">
<TextBox Canvas.Left = "94" Canvas.Top = "153" Name = "txtColor"
Width = "193" Height = "25"/>
<TextBox Canvas.Left = "94" Canvas.Top = "60" Name = "txtPetName"
Width = "193" Height = "25"/>
<TextBox Canvas.Left = "94" Canvas.Top = "107" Name = "txtMake"
Width = "193" Height = "25"/>
<Label Canvas.Left = "17" Canvas.Top = "14"
Name = "lblInstructions" FontSize = "15">Enter Car
Information</Label>
<Label Canvas.Left = "17" Canvas.Top = "109"
Name = "lblColor">Color</Label>
<Label Canvas.Left = "17" Canvas.Top = "155"
Name = "lblMake">Pet Name</Label>
<Label Canvas.Left = "17" Canvas.Top = "60"
Name = "lblPetName">Make</Label>
<Button Canvas.Left = "212" Canvas.Top = "203" Name = "btnOK"
Width = "80">OK</Button>
</Canvas>
</Window>
Because the elements are wrapped in a Panel, they will remained exactly where they are placed them in the
Canvas. Therefore, notice that when this window is resized, items can easily be covered up.
Canvas Panel
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Courseware
Training Resources
Tutorials
Services