blog

Home / DeveloperSection / Blogs / Wpf Dock Panel

Wpf Dock Panel

Sumit Kesarwani3836 25-Sep-2013

In this blog, I’m explaining the dock panel in wpf , how to create it in xaml as well as in .cs file .

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 Dock property is left. The Dock property is of type Dock enumeration that has Left, Right, Top, and Bottom values.

Example:

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

<Window x:Class="DockingWpfApplication.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">
    <Grid>
        <DockPanel Name="myDockPanel">
            <Button Name="TopRect" DockPanel.Dock="Top" Background="LightCoral"
            Height="50" Content="Top"/>
            <Button Name="LeftRect" DockPanel.Dock="Left" Background="LawnGreen"
            Width="50" Content="Left"/>
            <Button Name="RightRect" DockPanel.Dock="Right" Background="LavenderBlush"
            Width="50" Content="Right"/>
            <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan"
            Height="50" Content="Bottom"/>
            <Button Name="Fill" Background="LightGray" Content="Center" />
        </DockPanel>
    </Grid>
</Window>

             

The DockPanel class in WPF represents a DockPanel control.  The code


listed below creates a Dock Panel dynamically, add five Button controls to


it, and sets their docking properties by using SetDock method.   The output


of Listing generates Figure 1.

 

private void CreateDockPanel()
{
    // Create a DockPanel
    DockPanel myDockPanel = new DockPanel();
 
    // Create a button
    Button TopRect = new Button();
    TopRect.Background = new SolidColorBrush(Colors.LightGreen);
    TopRect.Height = 50;
    TopRect.Content = "Top";
    // Dock button to top
    DockPanel.SetDock(TopRect, Dock.Top);
    // Add docked button to DockPanel
    dcPanel.Children.Add(TopRect);
 
    // Create a button
    Button LeftRect = new Button();
    LeftRect.Background = new SolidColorBrush(Colors.LightBlue);
    LeftRect.Width = 50;
    LeftRect.Content = "Left";
    // Dock button to left
    DockPanel.SetDock(LeftRect, Dock.Left);
    // Add docked button to DockPanel
    dcPanel.Children.Add(LeftRect);
 
    // Create a button
    Button RightRect = new Button();
    RightRect.Background = new SolidColorBrush(Colors.LightSalmon);
    RightRect.Width = 50;
    RightRect.Content = "Right";
    // Dock button to left
    DockPanel.SetDock(RightRect, Dock.Right);
    // Add docked button to DockPanel
    dcPanel.Children.Add(RightRect);
 
    // Create a button
    Button BottomRect = new Button();
    BottomRect.Background = new SolidColorBrush(Colors.LightCyan);
    BottomRect.Height = 50;
    BottomRect.Content = "Bottom";
    // Dock button to left
    DockPanel.SetDock(BottomRect, Dock.Bottom);
    // Add docked button to DockPanel
    dcPanel.Children.Add(BottomRect);
 
    // Create a fill button
    Button FillRect = new Button();
    BottomRect.Background = new SolidColorBrush(Colors.LightGray);
 
    // Add docked button to DockPanel
    dcPanel.Children.Add(FillRect);
    RootWindow.Content = dcPanel;
 
}
 OutPut

Wpf Dock Panel

Updated 18-Sep-2014

Leave Comment

Comments

Liked By