You learn about the Grid in
previous article. this article explain you the next category of Layout Panels.
Canvas:
The last category of layout panel is canvas, it is the most lightweight of
the layout containers, because it doesn't include any complex layout logic.
canvas is a valuable tool for build something a little different (such as a
drawing surface for a diagramming tool) but also a poor choice for designing
rich data-driven forms and standard dialogs.
We says canvas is a unique layout
container because it doesn't arrange its children control in any way, all the
controls can positioned individually using an absolute positioning system.
Example: Create a layout
using canvas.
The code you need to write is:
<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">
<Canvas>
<Button
Canvas.Left="10"
Canvas.Top="10"
Content="Button
1" />
<Button
Canvas.Left="60"
Canvas.Top="60"
Content="Button
2" />
<Button
Canvas.Left="110"
Canvas.Top="110"
Content="Button
3" />
<Button
Canvas.Left="60"
Canvas.Top="160"
Content="Button
4" />
<Button
Canvas.Left="10"
Canvas.Top="210"
Content="Button
5" />
</Canvas>
</Window>
Output window
Example: Use Canvas.Right
and Canvas.Bottom to Create a mirror image.
The code you need to write is:
<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">
<Canvas>
<Button
Canvas.Right="10"
Canvas.Bottom="210"
Content="Button
1" />
<Button
Canvas.Right="60"
Canvas.Bottom="160"
Content="Button
2" />
<Button
Canvas.Right="110"
Canvas.Bottom="110"
Content="Button
3" />
<Button
Canvas.Right="60"
Canvas.Bottom="60"
Content="Button
4" />
<Button
Canvas.Right="10"
Canvas.Bottom="10"
Content="Button
5" />
</Canvas>
</Window>
Output Window
Conclusion
I hope this part of my article
helps you to clearing Canvas concept in WPF.