Word Mobileのような複数のオーバーフローメニューを備えたUWP CommandBar？

Question

私は基本的なC＃UWPアプリケーションをデスクトップ上で実行しています。アプリのレイアウトはWord Mobileに似ています。つまり、下にコマンドバーがあり、さまざまなコマンドを適用できるメインメニューがあります。

デフォルトのCommandBarには、プライマリコマンド（アイコンとして表示）とオーバーフローメニューに表示されるセカンダリコマンドがあります。

Word Mobileアプリケーションは、コマンドボタンの「グループ」を持つ特殊なコマンドバーを使用します。ウィンドウサイズが小さすぎてすべてのコマンドを表示できない場合は、各グループに独自のオーバーフローメニューがあります（下のスクリーンショットを参照）。

標準のXAMLコントロールを使用して、独自のオーバーフローメニューでこれらの「グループ化」コマンドを取得する方法はありますか？そうでない場合は、このようなカスタムコントロールを実装する戦略は何でしょうか？

例：

（1）ワイド・ウィンドウ：

（2）小窓：2つの別個のオーバーフローメニューボタン：

コマンドバーは、すべてのコマンドボタンを示します

Answer 1

遅れて申し訳ありませんが、私は概念証明の回答を掲載すると考えました。AllAppsButton、CalculatorButtonの一部である

ボタン - この例では、私は独立している以下

ボタンを含むCommandBarに作用AppBarButtonを作成した CameraGroup - CameraButton,AttachCameraButton

FontGroupの一部であるボタン - BoldButton、FontButton、ItalicButton

アイデアは、画面サイズ未満501画素である場合、私はVisualStateManagerとAdaptiveTriggersにを使用することですアクションボタンの代わりにグループシェブロンボタンを表示します。次に、関連するPopupコントロールを開く下のシェブロンをクリックして、アクションボタンを表示します。 画面が501ピクセル以上に拡大された場合、ポップアップはAdaptiveTriggersを使用して再び非表示になります。

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> 

コードは後ろのアップ/ダウンの矢印にシェブロンを変更する、2つのフィールドと2つのイベント隠すために使わ/ショー関連のポップアップが含まれています。

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

間違いなく大幅CustomControlよう改善していないが、アイデアを見せたかったことができ、コードのかなり。希望すると助かります

Answer 2

それはおそらく非常に複雑ではありませんが、それにもかかわらず多くの仕事があります。多分、アイテムが崩壊して優先順位が落ちる複数のグループがある（私は思うが）リボンから派生し、アイテムは優先順位が落ちる。

それに含まれるグループとMeasureOverrideから優先度を読み取るコンテナパネルを用意する必要があります。空間圧力が発生したときにグループ内の項目が折り畳まれてしまいます。

私のツールキットのToolStripコントロールには、ツールストリップとオーバーフロードロップダウン（チェックサンプルhere）の間でアイテムを移動するコードがあり、リボンのような折りたたみのサポートを実装するのに適しています。

IIRC CommandBarの公式サンプルには、調べることができるPrimaryCommandsとSecondaryCommandsの間でアイテムを移動するロジックが実装されています。