将CommandBar（XAML）的内容居中

Question

I would like to be able to center the content of my CommandBar. My current code is this

<Page.BottomAppBar>
    <CommandBar x:Name="BottomBar"  Background="Black" Visibility="Collapsed" OverflowButtonVisibility="Collapsed" >

        <CommandBar.PrimaryCommands>
            <AppBarButton Name="btnSend" Icon="Forward"  Foreground="White"/>
            <AppBarButton Name="btnCancel" Icon="Clear"  Foreground="White"/>
        </CommandBar.PrimaryCommands>

        <CommandBar.Content>
            <TextBlock Name="tbBar" Text="EOOOOOOOOO" Foreground="White" Margin="12,14" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </CommandBar.Content>
    </CommandBar>

</Page.BottomAppBar>

This puts the content on the left and aligned horizontally and vertically but I need it in the center.

Answer 1

I have written about this on my blog here , so browse it for full detail. The reason for this problem is the IsDynamicOverflowEnabled property, which was added in the Anniversary Update. When this is set to enabled, the Grid Column the Content of the CommandBar resides in gets Width="Auto" , which means it gives the content only the space it actually needs and reserves all remaining space to the CommandBar buttons.

The easiest solution is to set IsDynamicOverflowEnabled to false. If you want to keep this feature, you would have to modify the default template of CommandBar .

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