WPF

WPF Layout: DockPanel

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explains the layout process in WPF. The series began with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

    Introduction

    In the previous article, WPF Layout: Canvas Panel I discussed the canvas panel. This article focuses on the DockPanel in details.

    DockPanel

    A Dock Panel is used to dock child elements in the left, right, top and bottom positions of the relative elements. The position of child elements is determined by the Dock property of the respective child elements and the relative order of those child elements. The default value of the Dock property is left. The Dock property is of the type Dock enumeration that has Left, Right, Top and Bottom values.

    The LastChildFill property represents whether the last child element within a DockPanel stretches to fill the remaining available space.

    Here are some of the properties of DockPanels.

    • If the LastChildFill property is set to true, the Dock property of the last element will be ignored.
    • The Margin is applicable on DockPanels.

    The GetDock and SetDock methods are used to get and set the dock value of an element.

    The code listed in Listing 1 creates a DockPanel with five Button elements. Four buttons are docked and the last one has no docking set and it therefore fills the entire remaining area.

    1. <DockPanel Name="dcPanel">  
    2.     <Button Name="TopRect" DockPanel.Dock="Top" Background="LightGreen"    
    3. Height="50" Content="Top"/>  
    4.     <Button Name="LeftRect" DockPanel.Dock="Left" Background="LightBlue"    
    5. Width="50" Content="Left"/>  
    6.     <Button Name="RightRect" DockPanel.Dock="Right" Background="LightSalmon"    
    7. Width="50" Content="Right"/>  
    8.     <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan"    
    9. Height="50"/>  
    10.     <Button Name="Fill" Background="LightGray" />  
    11. </DockPanel>   

    Listing 1

    Figure 1

    The DockPanel class in WPF represents a DockPanel control. The code listed in Listing 2 creates a Dock Panel dynamically. Add five Button controls to it and set their docking properties using the SetDock method. The output of Listing a generates Figure 1.

    1. private void CreateADockPanelDynamically()   
    2. {  
    3.     // Create a DockPanel    
    4.     DockPanel dcPanel = new DockPanel();  
    5.   
    6.     // Create a button    
    7.     Button TopRect = new Button();  
    8.     TopRect.Background = new SolidColorBrush(Colors.LightGreen);  
    9.     TopRect.Height = 50;  
    10.     TopRect.Content = "Top";  
    11.   
    12.     // Dock button to top    
    13.     DockPanel.SetDock(TopRect, Dock.Top);  
    14.     // Add docked button to DockPanel    
    15.     dcPanel.Children.Add(TopRect);  
    16.   
    17.     // Create a button    
    18.     Button LeftRect = new Button();  
    19.     LeftRect.Background = new SolidColorBrush(Colors.LightBlue);  
    20.     LeftRect.Width = 50;  
    21.     LeftRect.Content = "Left";  
    22.   
    23.     // Dock button to left    
    24.     DockPanel.SetDock(LeftRect, Dock.Left);  
    25.     // Add docked button to DockPanel    
    26.     dcPanel.Children.Add(LeftRect);  
    27.   
    28.     // Create a button    
    29.     Button RightRect = new Button();  
    30.     RightRect.Background = new SolidColorBrush(Colors.LightSalmon);  
    31.     RightRect.Width = 50;  
    32.     RightRect.Content = "Right";  
    33.   
    34.     // Dock button to left    
    35.     DockPanel.SetDock(RightRect, Dock.Right);  
    36.     // Add docked button to DockPanel    
    37.     dcPanel.Children.Add(RightRect);  
    38.   
    39.     // Create a button    
    40.     Button BottomRect = new Button();  
    41.     BottomRect.Background = new SolidColorBrush(Colors.LightCyan);  
    42.     BottomRect.Height = 50;  
    43.     BottomRect.Content = "Bottom";  
    44.   
    45.     // Dock button to left    
    46.     DockPanel.SetDock(BottomRect, Dock.Bottom);  
    47.     // Add docked button to DockPanel    
    48.     dcPanel.Children.Add(BottomRect);  
    49.     // Create a fill button    
    50.     Button FillRect = new Button();  
    51.     BottomRect.Background = new SolidColorBrush(Colors.LightGray);  
    52.   
    53.     // Add docked button to DockPanel    
    54.     dcPanel.Children.Add(FillRect);  
    55.     RootWindow.Content = dcPanel;  
    56. }  

    Listing 2

    Summary

    In this article, I discussed the DockPanel in WPF. In the next article of this series, I will focus on Grid panels in details.

    Up Next
      Ebook Download
      View all
      Learn
      View all
      Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
      Membership not found