Layout Panel in WPF: Part 4
In this article I will explain about the layout and panels in WPF.
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.