UWP CommandBar mit mehreren Überlaufmenüs wie Word Mobile?

Question

Ich habe eine grundlegende C# UWP App auf dem Desktop ausgeführt. Das Layout der App ähnelt Word Mobile, d.h. es hat ein Hauptmenü mit einer Befehlsleiste darunter, um verschiedene Befehle anzuwenden.

Die Standard-CommandBar hat primäre Befehle (angezeigt als Symbole) und sekundäre Befehle, die im Überlaufmenü angezeigt werden.

Die Word Mobile App verwendet eine spezielle Befehlsleiste mit "Gruppen" von Befehlsschaltflächen. Jede Gruppe hat ihr eigenes Überlaufmenü, sollte die Fenstergröße zu klein sein, um alle Befehle anzuzeigen (siehe Screenshots unten).

Gibt es eine Möglichkeit, diese "gruppierten" Befehle mit einem eigenen Überlaufmenü unter Verwendung von Standard-XAML-Steuerelementen zu erhalten? Wenn nicht, was wäre eine Strategie, um ein benutzerdefiniertes Steuerelement wie dieses zu implementieren?

Beispiel:

(1) breites Fenster: CommandBar zeigt alle Befehlstasten:

(2) Kleine Fenster: zwei getrennte Überlaufmenütasten:

Answer 1

Sorry wegen der Verzögerung, aber ich dachte, ich würde eine Proof of Concept-Antwort posten. Für dieses Beispiel I Aktion AppBarButton in einem CommandBar einschließlich der folgenden

Buttons erstellt haben, die unabhängig sind - AllAppsButton, CalculatorButton

Buttons, die Teil der sind KameraGruppe - KameraButton, AttachCameraButton

Buttons, die Teil der FontGroup sind - BoldButton, FontButton, ItalicButton

Die Idee ist, dass, wenn die Bildschirmgröße kleiner als 501 Pixel I verwenden VisualStateManager und AdaptiveTriggers zu Zeige die Gruppen Chevron Buttons anstelle der Aktions Buttons. Die Aktionsschaltflächen werden dann durch Klicken auf den Abwärts-Chevron angezeigt, der eine relevante Popup-Steuerung öffnet. Die Popups werden wieder mit AdaptiveTriggers ausgeblendet, wenn der Bildschirm auf 501 Pixel oder mehr vergrößert wird.

MainPage.xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CameraGroupStates"> 
      <VisualState x:Name="Default"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="501" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="CameraButton.Visibility" Value="Visible"/> 
        <Setter Target="AttachCameraButton.Visibility" Value="Visible" /> 
        <Setter Target="CameraGroupButton.Visibility" Value="Collapsed" /> 
        <Setter Target="CameraGroupPopup.IsOpen" Value="false" /> 

        <Setter Target="FontButton.Visibility" Value="Visible"/> 
        <Setter Target="BoldButton.Visibility" Value="Visible" /> 
        <Setter Target="ItalicButton.Visibility" Value="Visible" /> 
        <Setter Target="FontGroupButton.Visibility" Value="Collapsed" /> 
        <Setter Target="FontGroupPopup.IsOpen" Value="false" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="Minimal"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="CameraButton.Visibility" Value="Collapsed"/> 
        <Setter Target="AttachCameraButton.Visibility" Value="Collapsed" /> 
        <Setter Target="CameraGroupButton.Visibility" Value="Visible" /> 

        <Setter Target="FontButton.Visibility" Value="Collapsed"/> 
        <Setter Target="BoldButton.Visibility" Value="Collapsed" /> 
        <Setter Target="ItalicButton.Visibility" Value="Collapsed" /> 
        <Setter Target="FontGroupButton.Visibility" Value="Visible" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <CommandBar x:Name="MainCommandBar" Height="50">    
     <AppBarButton x:Name="AllAppsButton" Icon="AllApps"></AppBarButton>    
     <AppBarButton x:Name="CameraButton" Icon="Camera"></AppBarButton> 
     <AppBarButton x:Name="AttachCameraButton" Icon="AttachCamera"></AppBarButton> 

     <!--This is the Group Chevron button for Camera--> 
     <AppBarButton x:Name="CameraGroupButton" Visibility="Collapsed" Content="&#xE019;" 
         Click="CameraGroupButton_Click"> 
      <AppBarButton.ContentTemplate> 
       <DataTemplate> 
        <Grid> 
         <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}" 
            FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center"></TextBlock> 
        </Grid> 
       </DataTemplate> 
      </AppBarButton.ContentTemplate> 
     </AppBarButton> 
     <AppBarButton x:Name="CaluclatorButton" Icon="Calculator"></AppBarButton> 
     <AppBarButton x:Name="BoldButton" Icon="Bold"></AppBarButton> 
     <AppBarButton x:Name="FontButton" Icon="Font"></AppBarButton> 
     <AppBarButton x:Name="ItalicButton" Icon="Italic"></AppBarButton> 

     <!--This is the Group Chevron button for Fonts--> 
     <AppBarButton x:Name="FontGroupButton" Visibility="Collapsed" Content="&#xE019;" 
         Click="FontGroupButton_Click"> 
      <AppBarButton.ContentTemplate> 
       <DataTemplate> 
        <Grid> 
         <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}" 
            FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center"></TextBlock> 
        </Grid> 
       </DataTemplate> 
      </AppBarButton.ContentTemplate> 
     </AppBarButton> 
    </CommandBar> 
    <Popup x:Name="CameraGroupPopup" HorizontalAlignment="Right" HorizontalOffset="-120" 
      VerticalOffset="50" IsOpen="False"> 
     <StackPanel Orientation="Horizontal" Width="120" Height="60" Background="LightGray" 
        HorizontalAlignment="Center"> 
      <AppBarButton x:Name="CameraGroupCameraButton" Icon="Camera" Width="50" Height="50" 
          Foreground="Black"/> 
      <AppBarButton x:Name="CameraGroupAttachCameraButton" Icon="AttachCamera" 
          Foreground="Black" Width="50" Height="50"></AppBarButton> 
     </StackPanel> 
    </Popup> 
    <Popup x:Name="FontGroupPopup" HorizontalAlignment="Right" HorizontalOffset="-170" 
      VerticalOffset="50" IsOpen="False"> 
     <StackPanel Orientation="Horizontal" Width="170" Height="60" Background="LightGray" 
        HorizontalAlignment="Center"> 
      <AppBarButton x:Name="FontGroupBoldButton" Icon="Bold" Width="50" Height="50" 
          Foreground="Black"/> 
      <AppBarButton x:Name="FontGroupFontButton" Icon="Font" 
          Foreground="Black" Width="50" Height="50"></AppBarButton> 
      <AppBarButton x:Name="FontGroupItalicButton" Icon="Italic" 
          Foreground="Black" Width="50" Height="50"></AppBarButton> 
     </StackPanel> 
    </Popup> 
</Grid> 

-Code enthält hinter zwei Felder und 2 Veranstaltungen genutzt verstecken/show relevant Popups, Chevrons Änderung/Pfeil nach unten nach oben.

public sealed partial class MainPage : Page 
{ 
    public bool CameraGroupIsOpen { get; set; } = false; 
    public bool FontGroupIsOpen { get; set; } = false; 

    public MainPage() 
    { 
     this.InitializeComponent(); 
    } 

    private void CameraGroupButton_Click(object sender, RoutedEventArgs e) 
    { 
     if (CameraGroupIsOpen) 
     { 
      CameraGroupPopup.IsOpen = false; 
      CameraGroupButton.Content = "\uE019"; 
      CameraGroupIsOpen = false; 
     } 
     else 
     { 
      CameraGroupPopup.IsOpen = true; 
      CameraGroupButton.Content = "\uE018"; 
      CameraGroupIsOpen = true; 
     } 
    } 

    private void FontGroupButton_Click(object sender, RoutedEventArgs e) 
    { 
     if (FontGroupIsOpen) 
     { 
      FontGroupPopup.IsOpen = false; 
      FontGroupButton.Content = "\uE019"; 
      FontGroupIsOpen = false; 
     } 
     else 
     { 
      FontGroupPopup.IsOpen = true; 
      FontGroupButton.Content = "\uE018"; 
      FontGroupIsOpen = true; 
     } 
    } 
} 

Ziemlich viel Code, der ohne Zweifel in beträchtlichem Ausmaß als CustomControl verbessert werden könnte, wollte aber die Idee zeigen. Hoffe, es hilft

Answer 2

Es ist wahrscheinlich nicht sehr kompliziert, aber es kann trotzdem eine Menge Arbeit sein. Es stammt wahrscheinlich von der Multifunktionsleiste, wo es mehrere Gruppen mit Itemzusammenbruch und Drop-Prioritäten gibt (denke ich), und Items werden in Prioritätsreihenfolge abgelegt.

Sie müssten ein Container-Panel haben, das Prioritäten aus den darin enthaltenen Gruppen und in MeasureOverride lesen würde - es würde kollabierende Elemente in den Gruppen steuern, wenn Raumdruck auftritt. Die ToolStrip-Steuerung in meinem Toolkit enthält Code zum Verschieben von Elementen zwischen dem Toolstrip und dem Überlauf-Dropdown (siehe Beispiel here) und könnte ein guter erster Schritt zur Implementierung der Unterstützung für bandähnliches Zusammenklappen sein.

IIRC das offizielle Beispiel für CommandBar hat auch Logik implementiert, um Elemente zwischen PrimaryCommands und SecondaryCommands zu verschieben, die Sie untersuchen könnten.