Understanding Canvas Layout
- Lays out element by absolute positioning.
- Elements in canvas are absolute positioned using Top and Left property.
- Canvas layout is useful in situation where UI elements never move.
Canvas Property used for Absolute Positioning are
- Canvas.Top - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.
- Canvas.Left - Gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas.
- Canvas.Right - Gets or sets a value that represents the distance between the right side of an element and the right side of its parent Canvas.
- Canvas.Bottom - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.
Example of Canvas Layout
As Canvas Layout is used for absolute positioning, we need to assign canvas property to align them. If you don't align Canvas.Top Property and Canvas.Left Property than it would display control overlapping one another.
Example when Canvas Property's are not assigned.
<Canvas>
<Label Content="Canvas Layout Demo"
FontSize="15" FontWeight="Bold"
Foreground="Blue"/>
<Label Content="Label1" FontSize="15" FontWeight="Bold" />
<Label Content="Label2" FontSize="15" FontWeight="Bold" />
<Label Content="Label3" FontSize="15" FontWeight="Bold" />
</Canvas>
Output
Example when Canvas Property's is assigned.
Tips: While absolute position, mostly used canvas properties are Canvas.Top and Canvas.Left Property.
<Canvas>
<Label Content="Canvas Layout Demo"
FontSize="15" FontWeight="Bold"
Foreground="Blue"
Canvas.Top="10" Canvas.Left="25"/>
<Label Content="Label1" FontSize="15" FontWeight="Bold"
Canvas.Top="40" Canvas.Left="25"/>
<Label Content="Label2" FontSize="15" FontWeight="Bold"
Canvas.Top="70" Canvas.Left="75"/>
<Label Content="Label3" FontSize="15" FontWeight="Bold"
Canvas.Top="100" Canvas.Left="125"/>
</Canvas>
Output