Aligning Content of CommandBar in UWP

Question

How can I align content in the content section of the CommandBar horizontally right? Before Anniversary Update, this was still possible.

Answer 1

Solution

Disable the IsDynamicOverflowEnabled property and set the HorizontalContentAlignment to Right. After doing this, you will get the same behavior as in pre-Anniversary Update SDK versions.

    <CommandBar HorizontalContentAlignment="Right"
                IsDynamicOverflowEnabled="False">
        <CommandBar.Content>
            <TextBlock Text="Content" />
        </CommandBar.Content>
    </CommandBar>

Cause of the issue

With the Anniversary Update SDK (Windows 10 version 1607) a new property was added to the CommandBar control - IsDynamicOverflowEnabled. This property is set to true by default and its purpose is to automatically overflow the app bar commands from primary area on the bar to the secondary area.

This addition however required a change in the default template of the control. If you look into the default of CommandBar template in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml, you will see that the template contains a new VisualStateGroup:

<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>

By default the control has the ContentControlColumnDefinition.Width set to * and PrimaryItemsControlColumnDefinition.Width set to Auto, which means the content will fill all the available space left after putting in the primary commands. This behavior however doesn't make sense for dynamic overflow, because that requires the commands to take as much space as possible before overflowing. Hence, the VisualState DynamicOverflowEnabled switches the column widths appropriately.