Edit

Share via

How to: Create a DockPanel

  • Article

Example

The following example creates and uses an instance of DockPanel by using code. The example shows you how to partition space by creating five Rectangle elements and positioning (docking) them inside a parent DockPanel. If you retain the default setting, the final rectangle fills all the remaining unallocated space.

    private void CreateAndShowMainWindow()
    {
        // Create the application's main window
        mainWindow = new Window ();

        // Create a DockPanel
        DockPanel myDockPanel = new DockPanel();

        // Add the first rectangle to the DockPanel
        Rectangle rect1 = new Rectangle();
        rect1.Stroke = Brushes.Black;
        rect1.Fill = Brushes.SkyBlue;
        rect1.Height = 25;
        DockPanel.SetDock(rect1, Dock.Top);
        myDockPanel.Children.Add(rect1);

        // Add the second rectangle to the DockPanel
        Rectangle rect2 = new Rectangle();
        rect2.Stroke = Brushes.Black;
        rect2.Fill = Brushes.SkyBlue;
        rect2.Height = 25;
        DockPanel.SetDock(rect2, Dock.Top);
        myDockPanel.Children.Add(rect2);

        // Add the third rectangle to the DockPanel
        Rectangle rect4 = new Rectangle();
        rect4.Stroke = Brushes.Black;
        rect4.Fill = Brushes.Khaki;
        rect4.Height = 25;
        DockPanel.SetDock(rect4, Dock.Bottom);
        myDockPanel.Children.Add(rect4);

        // Add the fourth rectangle to the DockPanel
        Rectangle rect3 = new Rectangle();
        rect3.Stroke = Brushes.Black;
        rect3.Fill = Brushes.PaleGreen;
        rect3.Width = 200;
        DockPanel.SetDock(rect3, Dock.Left);
        myDockPanel.Children.Add(rect3);

        // Add the final rectangle to the DockPanel
        Rectangle rect5 = new Rectangle();
        rect5.Stroke = Brushes.Black;
        rect5.Fill = Brushes.White;
        myDockPanel.Children.Add(rect5);

        // Add the DockPanel to the Window as Content and show the Window
        mainWindow.Content = myDockPanel;
        mainWindow.Title = "DockPanel Sample";
        mainWindow.Show();
    }
}

WindowTitle = "DockPanel Sample"
'Create a DockPanel as the root Panel
Dim myDP As New DockPanel()
' Add the first Rectangle to the DockPanel
Dim rect1 As New Rectangle
rect1.Stroke = Brushes.Black
rect1.Fill = Brushes.SkyBlue
rect1.Height = 25
DockPanel.SetDock(rect1, Dock.Top)
myDP.Children.Add(rect1)

' Add the second Rectangle to the DockPanel
Dim rect2 As New Rectangle
rect2.Stroke = Brushes.Black
rect2.Fill = Brushes.SkyBlue
rect2.Height = 25
DockPanel.SetDock(rect2, Dock.Top)
myDP.Children.Add(rect2)

' Add the third Rectangle to the DockPanel
Dim rect3 As New Rectangle
rect3.Stroke = Brushes.Black
rect3.Fill = Brushes.Khaki
rect3.Height = 25
DockPanel.SetDock(rect3, Dock.Bottom)
myDP.Children.Add(rect3)

' Add the fourth Rectangle to the DockPanel
Dim rect4 As New Rectangle
rect4.Stroke = Brushes.Black
rect4.Fill = Brushes.PaleGreen
rect4.Width = 200
rect4.VerticalAlignment = VerticalAlignment.Stretch
DockPanel.SetDock(rect4, Dock.Left)
myDP.Children.Add(rect4)

' Add the fourth Rectangle to the DockPanel
Dim rect5 As New Rectangle
rect5.Stroke = Brushes.Black
rect5.Fill = Brushes.White
myDP.Children.Add(rect5)
Me.Content = myDP

See also