UWP CommandBar dynamische Größe und Position

Question

In meiner App verwende ich eine CommandBar mit mehreren AppBarButtons, auf der Oberseite der App. Wenn ich nun die Größe des Fensters ändere, möchte ich, dass die AppBarButtons auf CommandBar.SecondaryButtons gehen, wenn sie nicht auf die gesamte Breite des Fensters passen. In der Standard-Wetter-App gibt es beispielsweise einen solchen Effekt.

Zweitens, ich möchte von der CommandBar auf der Oberseite, zu einer CommandBar auf der Unterseite, wie eine CommandBar in Page.BottomAppBar, auf bestimmten Gerätefamilien. Ich weiß nicht, ob ich zwei CommandBars in meinem XAML setzen und den einen zeigen sollte, der die Bedingungen erfüllt, oder ob es einen besseren Weg gibt. Ich möchte so viel wie möglich mit VisualStates tun, aber ich weiß nicht, wie man das erreicht.

Ich weiß, das sind zwei Fragen, aber beide Punkte auf die CommandBar, also hoffe ich, jemand kann mir helfen?

Mit freundlichen Grüßen

Answer 1

Für Ihre erste Frage: Sie können Setup die Tasten in Primary und Secondary Abschnitte des CommandBar. Verwenden Sie dann VisualStates, um die Sichtbarkeit von ihnen abhängig von der Breite der App zu ändern. ODER Sie können es in Code vollständig mit SizeChanged Ereignis der Seite tun.

Zweite Frage, lässt etwas schaffen wie

<Page> 
    <Grid> 
<!-- row definition here --> 
<!-- Row 1 --> 
<!-- Row 2 --> 

<!-- Content --> 
<Grid Grid.Row="0"/> 

<!-- app bar --> 
<CommandBar Grid.Row="1"/> 
    </Grid> 
</Page> 

Ändern der angefügten Eigenschaft Grid.Row auf die gewünschte Nummer mit VisualStates ähnliches in Frage.

Answer 2

Als Beispiel, in der Standard-Wetter-App gibt es einen solchen Effekt.

können Sie verwenden VisualStateManager auf visuelle Zustände und die Logik für die Übergänge zwischen visueller Zustände für Kontrollen und verwenden Sie die Visibility Eigenschaft des AppBarButton zu zeigen oder verbergen sie verwaltet.

Zum Beispiel:

Ich füge zwei AppBarButton im CommandBar.PrimaryCommands und zwei AppBarButton im CommandBar.SecondaryCommands. Wenn die Fensterbreite kleiner als 720 ist, setze ich die Visibility Eigenschaft des AppBarButton in CommandBar.PrimaryCommands auf Collapsed. Wenn die Fensterbreite größer als 720 oder gleich 720 ist, setze ich die Visibility Eigenschaft von AppBarButton in CommandBar.SecondaryCommands auf Collapsed.

Der XAML-Code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="PrimaryHome.Visibility" Value="Collapsed"/> 
        <Setter Target="PrimaryAdd.Visibility" Value="Collapsed"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="SecondHome.Visibility" Value="Collapsed"/> 
        <Setter Target="SecondAdd.Visibility" Value="Collapsed"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 
<Page.TopAppBar> 
    <CommandBar x:Name="TopCommands" > 
     <CommandBar.PrimaryCommands> 
      <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/> 
      <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add" /> 
     </CommandBar.PrimaryCommands> 
     <CommandBar.SecondaryCommands> 
      <AppBarButton Name="SecondHome" Icon="Home" Label="Home" /> 
      <AppBarButton Name="SecondAdd" Icon="Add" Label="Add" /> 
     </CommandBar.SecondaryCommands> 
    </CommandBar> 
</Page.TopAppBar> 

Zweitens möchte ich auf dem Top vom CommandBar wechseln, zu einem CommandBar auf dem Boden, wie ein CommandBar innen Page.BottomAppBar, auf bestimmte Gerätefamilien.

Sie können die Page.TopAppBar und die Page.BottomAppBar in Ihrem XAML hinzufügen. Und verwenden Sie VisualStateManager, um zu verwalten, welche CommandBar auf der Seite angezeigt werden sollte.

Zum Beispiel:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TopCommands.Visibility" Value="Visible"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="BottonCommands.Visibility" Value="Visible"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 
<Page.TopAppBar> 
    <CommandBar x:Name="TopCommands" Visibility="Collapsed" > 
     <CommandBar.PrimaryCommands> 
      <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/> 
      <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add" /> 
     </CommandBar.PrimaryCommands> 
    </CommandBar> 
</Page.TopAppBar> 
<Page.BottomAppBar> 
    <CommandBar x:Name="BottonCommands" Visibility="Collapsed"> 
     <CommandBar.PrimaryCommands> 
      <AppBarButton Name="BottonPrimaryHome" Icon="Home" Label="Home"/> 
      <AppBarButton Name="BottonPrimaryAdd" Icon="Add" Label="Add" /> 
     </CommandBar.PrimaryCommands> 
    </CommandBar> 
</Page.BottomAppBar>