. All the UI components are placed on top of){kind=link}
The Canvas Panel is most likely the most straightforward Panel of all (Grid, Dock, Stack & Wrap). All the UI components are placed on top of each other if no coordinates will be given. This means each single WPF component needs X & Y exact locations inside the canvas.
Most developers use Canvas for UI purposes, like modification of SVG images or drawing UI Components like circles, rectangles etc.
In the following example, you can observe that we added two buttons and they are placed on top of each other. By default, the last element always appears on the top, such as in the following code UI is showing button2 on top of button1.
<Window x:Class="JWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:JWPF" mc:Ignorable="d" Title="MainWindow" Height="250" Width="400"> <Canvas> <Button>Button 1</Button> <Button>Button 2</Button> </Canvas> </Window>
If you want to place WPF Components then you have to use the (Left, Right, Top and Bottom) properties of Canvas. Such as in the following code we are adding four buttons with different canvas positions. In the above image, you can observe the UI of the following code.
- In the case of Canvas.Top property whatever value we put, will behave as a margin from the top. (Button2)
- In the case of Canvas.Bottom property whatever value we put, will behave as a margin from the bottom. (Button3)
- In the case of Canvas.Right property whatever value we put, will behave as a margin from the right. (Button1)
- In the case of Canvas.Left property whatever value we put, will behave as a margin from the left. (Button4)
<Window x:Class="JWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:JWPF" mc:Ignorable="d" Title="MainWindow" Height="250" Width="400"> <Canvas> <Button Canvas.Right="50">Button 1</Button> <Button Canvas.Top="50">Button 2</Button> <Button Canvas.Bottom="50">Button 3</Button> <Button Canvas.Left="50">Button 4</Button> </Canvas> </Window>
Canvas Panel Z-Index
If you want to reorder WPF components on top of each other then you have to use the Z-Index property. By default value of the z-index is zero, if you will modify this value then UI components will change the order also, to illustrate this concept we created the following code and the above image which is the output of the code.
<Window x:Class="JWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:JWPF" mc:Ignorable="d" Title="MainWindow" Height="250" Width="400"> <Canvas> <Rectangle Fill="Red" Height="100" Width="100"></Rectangle> <Rectangle Fill="Yellow" Height="100" Width="100" Canvas.Left="20" Canvas.Top="20"></Rectangle> <Rectangle Fill="Blue" Height="100" Width="100" Canvas.Left="40" Canvas.Top="40"></Rectangle> <Rectangle Panel.ZIndex="0" Fill="Red" Height="100" Width="100" Canvas.Left="200"></Rectangle> <Rectangle Panel.ZIndex="2" Fill="Yellow" Height="100" Width="100" Canvas.Left="220" Canvas.Top="20"></Rectangle> <Rectangle Panel.ZIndex="0" Fill="Blue" Height="100" Width="100" Canvas.Left="240" Canvas.Top="40"></Rectangle> </Canvas> </Window>
To understand the concept in depth you can view the following video.