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 require exact pixel positioning of your UI elements.
The order in which elements are declared within a Canvas has no effect on placement. Positioning is typically
controlled via Top and Left properties relative to the Canvas using attached-property syntax.
<UserControl x:Class = "SimpleSilverlightApplication.Page"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
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"/>
<TextBlock Canvas.Left = "17" Canvas.Top = "14"
Name = "lblInstructions" FontSize = "15">Enter Car
Information</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "109"
Name = "lblColor">Color</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "155"
Name = "lblMake">Pet Name</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "60"
Name = "lblPetName">Make</TextBlock>
<Button Canvas.Left = "212" Canvas.Top = "203" Name = "btnOK"
Width = "80" Content="OK"/>
</Canvas>
</UserControl>
The rendered output would be as so:
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 require exact pixel positioning of your UI elements.
The order in which elements are declared within a Canvas has no effect on placement. Positioning is typically
controlled via Top and Left properties relative to the Canvas using attached-property syntax.
<UserControl x:Class = "SimpleSilverlightApplication.Page"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
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"/>
<TextBlock Canvas.Left = "17" Canvas.Top = "14"
Name = "lblInstructions" FontSize = "15">Enter Car
Information</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "109"
Name = "lblColor">Color</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "155"
Name = "lblMake">Pet Name</TextBlock>
<TextBlock Canvas.Left = "17" Canvas.Top = "60"
Name = "lblPetName">Make</TextBlock>
<Button Canvas.Left = "212" Canvas.Top = "203" Name = "btnOK"
Width = "80" Content="OK"/>
</Canvas>
</UserControl>
The rendered output would be as so:
Panels
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