In This Article


This panel allows child elements to be positioned either horizontally or vertically, relative to each other.



This panel can be used as a drop-in replacement for the native WPF DockPanel panel.


Child elements are positioned or "docked" to a specified edge, and relative to other child elements. The AnimatedDockPanel.DockProperty attached property is used to specify the edge to which the element should be docked.

If two child elements are docked to the left side of the panel, the first element will be aligned with the left edge of the panel, while the second element will be aligned with the right edge of the first element. As elements are docked, their allotted space is reserved and any remaining child elements will be docked around them.

Special handling can be applied to the last child element. It can either be set to fill any remaining space, which is the default behavior. Alternatively, it can be docked like other elements. This behavior can be customized using the AnimatedDockPanel.LastChildFill property. When LastChildFill is set to true, the DockProperty on the last element is ignored.

Getting Started with AnimatedDockPanel

This code shows typical XAML code used to position elements in an AnimatedDockPanel:

<views:AnimatedDockPanel LastChildFill="True">
	<!-- Docked to the left side of the panel -->
	<Button Content="One" views:AnimatedDockPanel.Dock="Left" \>
	<!-- Fills the remaining space of the panel -->
	<Button Content="Two" \>

Important Members

The following AnimatedDockPanel members are key to its use:

Member Description
DockProperty Attached Property Gets or sets the edge of the panel to which the element will be docked.
LastChildFill Property Gets or sets a value that indicates whether the last child element within the panel stretches to fill the remaining available space.