The
CommandBar control is a vital component of UWP app design. It is an evolution of the
AppBar concept, which was available ever since Windows Phone 7, but with UWP is much more feature complete. One thing that is still missing however is the option to choose the direction in which the command bar opens.

Problem

The default behavior of the
CommandBar is to open in the up direction whenever the control is not at the very top of the window. This is an issue, because this holds true even when we define a custom title bar on Desktop, in which case the
CommandBaropens below the window’s minimize, maximize and close buttons which doesn’t look good at all.

The default template

The default template of the
CommandBar control defines the states of the control as a collection of
VisualStates and
VisualStateTransitions . It turns out that there is always a separate visual state for down and up direction.

Inside these states you can see that the system just uses different values for some of the properties like
CommandBarTemplateSettings.ContentHeight vs
CommandBarTemplateSettings.NegativeOverflowContentHeight for the
Y property of
OverflowContentRootTransform .

Solution

We cannot easily change the inner logic of the control itself, but we can make the control in up-open state look identical as it does for down-open state. This can be achieved purely by copy-pasting the
Storyboards from
...OpenDownvisual states and visual state transitions to the respective
...OpenUp counterparts. Unfortunately the manual copy-pasting is the only option, because extracting the
Storyboards into separate resources and referencing them with
{StaticResource} isn’t supported.

To get a full copy of the default control style you can use either the XAML Designer (right-click the control, select Edit Template and Edit a Copy…), or search for it in
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP{version}\Generic\generic.xaml

The Universal Windows Platform CommandBar control has a new feature called dynamic overflow since the Anniversary Update. This automatically adjusts the number of presented app bar buttons so that they fit and puts the additional commands in the secondary (overflow) menu. This addition has however inadvertently caused some headaches for developers who use
Content property of the
CommandBar to display additional content – it turns out, that alignment of the content now doesn’t work properly.

The problem

Let’s demonstrate the issue with a simple example.

XHTML

1

2

3

4

5

6

<CommandBar HorizontalContentAlignment="Center">

<AppBarButton Icon="Accept" />

<CommandBar.Content>

<TextBlock Text="My content" />

</CommandBar.Content>

</CommandBar>

We would expect, that the content of the
CommandBar is aligned to the center of its available area, which indeed was the case before the Anniversary Update.

Since Anniversary 14393 SDK, the
HorizontalContentAlignment property is by default not respected.

The CommandBar does not respect the HorizontalContentAlignment property by default

Cause of the problem

The default control templates are stored in a XAML resource dictionary file on the following path:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml . If you search for the
CommandBar template inside this file, you will find out that it contains a new
VisualStateGroup :

XHTML

1

2

3

4

5

6

7

8

9

<VisualStateGroup x:Name="DynamicOverflowStates">

<VisualState x:Name="DynamicOverflowDisabled"/>

<VisualState x:Name="DynamicOverflowEnabled">

<VisualState.Setters>

<Setter Target="ContentControlColumnDefinition.Width"Value="Auto"/>

<Setter Target="PrimaryItemsControlColumnDefinition.Width"Value="*"/>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

As you can see, when dynamic overflow is enabled, sizing of the columns in the main layout
Grid of the control changes.

In the default visual state (
DynamicOverflowDisabled ) is the
ContentControlColumnDefinition.Width set to
* (star) and the
PrimaryItemsControlColumnDefinition.Width set to
Auto . This means that the app bar buttons on the right take up a certain width and the remaining space is dedicated to the content.

With dynamic overflow enabled, sizing of the columns is flipped. The control lets the primary items column take up as much space as it can (so that the available space can be used for the buttons and the number of displayable buttons can be calculated at runtime) and the content column now gets only the width it actually needs. Whichever alignment you set to the content doesn’t matter. The content will always seem left aligned, because its column is sized just to fit.

Since the Anniversary Update, dynamic overflow of the command bar is enabled by default.

Solution

You can disable dynamic overflow using the
IsDynamicOverflowEnabledproperty. Although you have to make sure that the app bar buttons display well on all display sizes, you can also align the content as you please.

If you want to preserve the dynamic overflow feature, you may just want to put some margin around your content to make sure it looks aligned. Of course, to support multiple different display sizes, you should adjust the margins using Adaptive Triggers.