Dock Panel Control In UWP

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, we have 4 options to Dock, left (Default), right, top, bottom. We can set DockPanel LastChildFill property to true if we want the last item added to the DockPanel to fill the rest of the empty space.

DockPanel Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services and it simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use DockPanel Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

• Windows 10 (Recommended)
• Microsoft Visual Studio 2017
• Windows Anniversary Update (10.0.14393.0)

Step 1

Open Visual studio 2017 -> Start -> New Project -> Windows Universal (under Visual C#) -> Blank App(Universal Windows) -> Give a suitable name for your App (UWPDockPanel) -> OK.

After choosing the target and minimum platform version that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

Step 2

First, update the reference to Microsoft.NETCore.UniversalWindowsPlatform with the latest version using "Manage NuGet Packages".

Step 3

Add the following controls in design window for DockPanel control view. Add the TextBlock and change the name and text properties.

Add the DockPanel control and set the name and LastChildFill properties.

Add images to the Assets folder for DockPanel Demo.

For DockPanel Top, add image control and set the height, source, and DockPanel.Dock properties.

Similarly, set DockPanel Left, Bottom and Right with Image controls.

Also, add stackpanel with textbox control for adding more controls in DockPanel Top, Left, Bottom, and Right.