WPF DockPanel Layout

DockPanel gives us an area to arrange the elements with each other. We can place the child elements either horizontally or vertically.

With the help of the DockPanel, we can easily arrange the child elements at the top, bottom, right, left, and the center by using the Dock property.

DockPanel is used to place the content in all the directions. We can divide the window into a specific area. We will use a DockPanel.Dock property to decide which direction we want to use to place the child control. In case if we didn’t use this, then the first control will be placed to the left. The last one will cover all the space.

Here we are going to take an example to place the elements in the screen according to the dock panel layout as shown below:

MainWindow.XAML

  <Window x:Class=”DockPanelLayout.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:DockPanelLayout”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <DockPanel>          <Button DockPanel.Dock=”Left”>Left</Button>          <Button DockPanel.Dock=”Top”>Top</Button>          <Button DockPanel.Dock=”Right”>Right</Button>          <Button DockPanel.Dock=”Bottom”>Bottom</Button>          <Button>Center</Button>      </DockPanel>    </Window>  

The output of the above code will look like as shown in the below screenshot:

OUTPUT

WPF DockPanel Layout

In the above example, if we notice that we assigned the dock position for the child element. The last child element automatically acquires the whole remaining space. The controls around the center will take the space according to their need, and the remaining space is left for the last child element. The Right child element acquires the space more than the Left child control. It is just because of the extra character is added in the right child element, and the extra character will need the extra space.

Now we will talk about how the space of the screen is divided. Here if we notice that the top element doesn’t acquire all the top space. It was just because the left button covers the part of the top button. In this situation, DockPanel will decide the space of the controls by looking at their mark-up.

In this case, the left button precedes because this button is placed in the first position in the mark-up. We can easily change the controls’ space by assigning the heights and widths to the child control.

Here we will see another example where we will set the height and width of the control. For this we will write the below code:

MainWindow.XAML

  <Window x:Class=”DockPanelLayout.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:DockPanelLayout”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <DockPanel>          <Button DockPanel.Dock=”Top” Height=”50″>Top</Button>          <Button DockPanel.Dock=”Bottom” Height=”50″>Bottom</Button>          <Button DockPanel.Dock=”Left” Width=”50″>Left</Button>          <Button DockPanel.Dock=”Right” Width=”50″>Right</Button>          <Button>Center</Button>      </DockPanel>  </Window>  

The output of the code is shown us like as in the below screenshot:

OUTPUT

WPF DockPanel Layout

Here in the above screenshot we can see that the both the controls like top and bottom precede over the left and right controls. When we resize the window either in smaller or bigger, in that case we will see that the static width and height will remain the same.

When we resize the screen of the window, only the centre area will increase or decrease.

LastChildFill

As we know that by default the last child of the DockPanel acquires the rest of the space. But we can disable this behaviour by using the LastChildFill.

Here we will take an example, where we will write a code to disable the last child element of the dock and will also show the behaviour of the dock of having more than one control at the same side.

For that we will write the below XAML code:

MainWindow.XAML

  <Window x:Class=”DockPanelLayout.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:DockPanelLayout”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <DockPanel LastChildFill=”False”>          <Button DockPanel.Dock=”Top” Height=”50″ Background=”Brown”>Top</Button>          <Button DockPanel.Dock=”Bottom” Height=”50″ Background=”Chocolate”>Bottom</Button>          <Button DockPanel.Dock=”Left” Width=”50″ Background=”DarkGray”>Left</Button>          <Button DockPanel.Dock=”Left” Width=”50″ Background=”DarkGreen”>Left</Button>          <Button DockPanel.Dock=”Right” Width=”50″ Background=”DeepSkyBlue”>Right</Button>          <Button DockPanel.Dock=”Right” Width=”50″ Background=”DarkOrange”>Right</Button>      </DockPanel>    </Window>  

The output of the above code will be like as shown in the below screenshot:

OUTPUT

WPF DockPanel Layout

Here in the above example, we place the two controls on the left and the two controls on the right and disable the LastChildFill property. Then through this we get the empty space in the centre which is in demand in most of the cases.

Here we will take another example of the DockPanel. Here we will add the button in the DockPanel with the help of the XAML code:

MainWindow.XAML

  <Window x:Class=”DockPanelLayout.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:DockPanelLayout”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>          <DockPanel LastChildFill = “True”>              <Button Content = “Top” DockPanel.Dock = “Top” Click=”Button_Click”/>              <Button Content = “Bottom” DockPanel.Dock = “Bottom” Click =”Button_Click” />              <Button Content = “Left” Click =”Button_Click” />              <Button Content = “Right” DockPanel.Dock = “Right” Click = “Button_Click” />              <Button Content = “Center” Click =”Button_Click” />          </DockPanel>      </Grid>    </Window>  

Now we will do the C# coding on the button click event.

MainWindow.cs

  using System;  using System.Collections.Generic;  using System.Linq;  using System.Text;  using System.Threading.Tasks;  using System.Windows;  using System.Windows.Controls;  using System.Windows.Data;  using System.Windows.Documents;  using System.Windows.Input;  using System.Windows.Media;  using System.Windows.Media.Imaging;  using System.Windows.Navigation;  using System.Windows.Shapes;    namespace DockPanelLayout  {      /// <summary>      /// Interaction logic for MainWindow.xaml      /// </summary>      public partial class MainWindow : Window      {          public MainWindow()          {              InitializeComponent();          }            private void Button_Click(object sender, RoutedEventArgs e)          {              Button btn = sender as Button;              string str = btn.Content.ToString() + ” button clicked”;              MessageBox.Show(str);            }      }  }  

The output of the above code will be like as shown in the below screenshot:

OUTPUT

WPF DockPanel Layout

Next TopicWPF Canvas Panel

features of wpf what is wpf wpf wpf border wpf canvas wpf controls wpf groupbox wpf imagesource wpf listbox wpf richtextbox wpf timer wpf treeview wpf viewbox wpf vs winforms wpf xaml

WPF DockPanel Layout

WPF DockPanel Layout

MainWindow.XAML

LastChildFill

MainWindow.XAML

MainWindow.XAML

How to Install WordPress

CDATA PCDATA

You may also like