WPF - DockPanel



DockPanel defines an area to arrange child elements relative to each other, either horizontally or vertically. With DockPanel you can easily dock child elements to top, bottom, right, left and center using the Dock property.

With LastChildFill property, the last child element fill the remaining space regardless of any other dock value when set for that element. The hierarchical inheritance of DockPanel class is as follows −

Hierarchical of DockPanel

Commonly Used Properties of DockPanel

Sr. No. Property & Description
1

Background

Gets or sets a Brush that fills the panel content area. (Inherited from Panel)

2

Children

Gets a UIElementCollection of child elements of this Panel. (Inherited from Panel.)

3

Dock

Gets or sets a value that indicates the position of a child element within a parent DockPanel.

4

Height

Gets or sets the suggested height of the element. (Inherited from FrameworkElement.)

5

ItemHeight

Gets or sets a value that specifies the height of all items that are contained within a WrapPanel.

6

ItemWidth

Gets or sets a value that specifies the width of all items that are contained within a WrapPanel.

7

LastChildFill

Gets or sets a value that indicates whether the last child element within a DockPanel stretches to fill the remaining available space.

8

LogicalChildren

Gets an enumerator that can iterate the logical child elements of this Panel element. (Inherited from Panel.)

9

LogicalOrientation

The Orientation of the panel, if the panel supports layout in only a single dimension. (Inherited from Panel.)

10

Margin

Gets or sets the outer margin of an element. (Inherited from FrameworkElement.)

11

Name

Gets or sets the identifying name of the element. The name provides a reference so that code-behind, such as event handler code, can refer to a markup element after it is constructed during processing by a XAML processor. (Inherited from FrameworkElement.)

12

Orientation

Gets or sets a value that specifies the dimension in which child content is arranged.

13

Parent

Gets the logical parent element of this element. (Inherited from FrameworkElement.)

14

Resources

Gets or sets the locally-defined resource dictionary. (Inherited from FrameworkElement.)

15

Style

Gets or sets the style used by this element when it is rendered. (Inherited from FrameworkElement.)

16

Width

Gets or sets the width of the element. (Inherited from FrameworkElement.)

Commonly Used Methods of DockPanel

Sr. No. Method & Description
1

GetDock

Gets the value of the Dock attached property for a specified UIElement.

2

SetDock

Sets the value of the Dock attached property to a specified element.

Example

The following example shows how to add child elements into a DockPanel. The following XAML implementation creates buttons inside a DockPanel.

<Window x:Class = "WPFDockPanel.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:WPFDockPanel" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid> 
      <DockPanel LastChildFill = "True"> 
         <Button Content = "Top" DockPanel.Dock = "Top" Click = "Click_Me" /> 
         <Button Content = "Bottom" DockPanel.Dock = "Bottom" Click = "Click_Me" />
         <Button Content = "Left" Click = "Click_Me" /> 
         <Button Content = "Right" DockPanel.Dock = "Right" Click = "Click_Me" /> 
         <Button Content = "Center" Click = "Click_Me" /> 
      </DockPanel> 
   </Grid> 
	
</Window> 

Here is the implementation in C# for event.

using System.Windows; 
using System.Windows.Controls;
  
namespace WPFDockPanel { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window { 
	
      public MainWindow() { 
         InitializeComponent(); 
      } 
		
      private void Click_Me(object sender, RoutedEventArgs e) { 
         Button btn = sender as Button; 
         string str = btn.Content.ToString() + " button clicked"; 
         MessageBox.Show(str); 
      }  
		
   } 
}

When you compile and execute the above code, it will display the following output −

Output of Dockpanel

On clicking any button, it will also display a message. For example, when you click the button which is at the Center, it will display the following message.

Center Button

We recommend that you execute the above example code and try its other properties as well.

wpf_layouts.htm
Advertisements