Zentrale Befehlsleistenschaltflächen in Windows uwp

Question

Gibt es eine Möglichkeit, eine Befehlsleistenschaltfläche auf 50% der Balkenbreite zu verschieben? Neue Schaltflächen sind immer auf der rechten Seite stecken, und ich möchte, dass sie zentriert werden:

App bar button

Aber die Horizontal Eigenschaft zum Zentrum Ändern wird sich nicht bewegen. Das Einzige, was zu funktionieren scheint, ist mit Rändern zu arbeiten - aber ich kann sie nicht verwenden, da die Position für verschiedene Auflösungen unterschiedlich ist.

XAML-Code sieht wie folgt aus:

<Page.BottomAppBar> 
    <CommandBar Background="#FFFF8B00" VerticalAlignment="Top" HorizontalAlignment="Left" Width="360" HorizontalContentAlignment="Center" UseLayoutRounding="True" VerticalContentAlignment="Top" Padding="0"> 
     <AppBarButton x:Name="button" HorizontalAlignment="Center" Icon="Account" Label="button" VerticalAlignment="Top" d:LayoutOverrides="Height"/> 
    </CommandBar> 
</Page.BottomAppBar> 

Answer 1

Wenn Sie die Echtzeitansicht des CommandBar mit Live Visual Tree erhalten, können Sie sehen, dass die AppBarButton s alle in der PrimaryItemsControl:

Wie Sie auf dem Bild sehen können, gibt es eine ContentControl in der CommandBar, die das gleiche Niveau mit PrimaryItemsControl hat.

So können Sie die CommandBar styles and templates überprüfen Sie bitte die Standard-Stil CommandBar auf Ihrer Seite Ressource kopieren, und die PrimaryItemsControl in diesem Stil finden, standardmäßig ist es dies wie:

<ItemsControl 
    x:Name="PrimaryItemsControl" 
    HorizontalAlignment="Right" 
    MinHeight="{ThemeResource AppBarThemeMinHeight}" 
    IsTabStop="False" 
    Grid.Column="1"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Es wird in der Spalte bleiben 1 eines Grid die „ContentRoot“ und teilen sich den Platz mit ContentControl benannt ist, jetzt können Sie diese PrimaryItemsControl wie folgt bearbeiten:

<ItemsControl 
    x:Name="PrimaryItemsControl" 
    HorizontalAlignment="Center" 
    MinHeight="{ThemeResource AppBarThemeMinHeight}" 
    IsTabStop="False" 
    Grid.ColumnSpan="2"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Es ist ziemlich einfach, aber Sie brauchen, um Nachteile Wenn Sie Inhalte in Ihre CommandBar.Content hinzufügen möchten, können Ihre AppBarButton s Ihren Inhalt überlagern. Aber wenn Sie nicht CommandBar.Content verwenden, dann ist es in Ordnung, diese Arbeit zu tun.

Answer 2

Versuchen Sie, diese XAML-Code

<Page.BottomAppBar> 
    <AppBar IsOpen="False" IsSticky="True" Background="#FFFF8B00" UseLayoutRounding="True"> 
     <AppBarButton Name="button" Icon="Account" Label="button" HorizontalAlignment="Center"/> 
    </AppBar> 
</Page.BottomAppBar>