Layout Panel in WPF: Part 4

In this article I will explain about the layout and panels in WPF.
  • 1893

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

 canv1.gif

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

 canv2.gif

Conclusion

I hope this part of my article helps you to clearing Canvas concept in WPF.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.