Edit

Share via

DockPanel

  • Article

The DockPanel control defines an area where you can arrange child elements either horizontally or vertically, relative to each other.

The DockPanel position child controls based on the child Dock property, you have 4 options to Dock, left (Default), right, top, bottom. You can set DockPanel LastChildFill property to true if you want the last item added to the DockPanel to fill the rest empty space.

Try it in the sample app

Syntax

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:DockPanel Name="SampleDockPanel" Margin="2" Background="LightGray" LastChildFill="False" >
  <StackPanel Height="100" controls:DockPanel.Dock="Top" Background="Black"></StackPanel>
  <StackPanel Width="100" controls:DockPanel.Dock="Left" Background="Red"></StackPanel>
  <StackPanel Height="100" controls:DockPanel.Dock="Bottom" Background="Green"></StackPanel>
  <StackPanel Width="100" controls:DockPanel.Dock="Right" Background="Blue"></StackPanel>
</controls:DockPanel>

Sample Output

DockPanel animation

Properties

Property Type Description
LastChildFill bool Gets or sets a value indicating whether the last child element within a DockPanel stretches to fill the remaining available space
Padding Thickness The dimensions of the space between the edge and its child as a Thickness value. Thickness is a structure that stores dimension values using pixel measures.

Sample Project

DockPanel Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API Source Code