Width CommandBar (UWP)

Question

Wie kann ich die Breite von CommandBar ändern? Ich möchte die Größe des Desktop-Modus im Mobile-Modus.

Desktop-Modus: image

Mobil-Modus: image

Edit: Dies ist mein Code, ich verwende Flyout nicht.

<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0"> 
    <CommandBar.SecondaryCommands> 
    <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" Style="{StaticResource AppBarButtonStyle1}" /> 
    <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" Style="{StaticResource AppBarButtonStyle1}" /> 
    </CommandBar.SecondaryCommands> 

Answer 1

das Problem ist nicht die commandbar. Sie müssen Ihre XAML im Flyout überprüfen. Stellen Sie die horizontale Ausrichtung rechts von Ihren Artikeln innerhalb des Flyouts ein.

Answer 2

Das Standard-Überlaufmenü ist so gestaltet, dass es sich von der Leiste unterscheidet. Sie können das Styling anpassen, indem Sie die Eigenschaft CommandBarOverflowPresenterStyle auf einen Style setzen, der auf CommandBarOverflowPresenter zielt. Standardmäßig passt das Überlaufmenü seine Größe und Darstellung an die Fensterbreite an, so dass es sich bei kleinen Fenstern/Bildschirmen auf die gesamte Breite erstreckt und nur den Rand entlang der Vorderkante statt des gesamten Menüs anzeigt. Sie können dies überschreiben, indem Sie das Menü neu gestalten. Im folgenden Beispiel entferne ich einige der visuellen Zustände, die BorderThickness verändern, und ich programmiere die MaxWidth/MinWidth sowie die HorizontalAlignment fest (um zu verhindern, dass sie in kleineren Fenstern gestreckt wird).

<CommandBar Margin="0"> 
    <CommandBar.CommandBarOverflowPresenterStyle> 
     <Style TargetType="CommandBarOverflowPresenter"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="CommandBarOverflowPresenter"> 
         <Grid x:Name="LayoutRoot" 
           MaxWidth="480" 
           MinWidth="196" 
           HorizontalAlignment="Right" 
           Background="{TemplateBinding Background}" 
           Padding="{TemplateBinding Padding}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="1,1,1,1"> 
          <ScrollViewer HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
               HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
               VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
               VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
              ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" 
               AutomationProperties.AccessibilityView="Raw"> 
           <ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7" /> 
          </ScrollViewer> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </CommandBar.CommandBarOverflowPresenterStyle> 
    <CommandBar.SecondaryCommands> 
     <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare"/> 
     <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti"/> 
    </CommandBar.SecondaryCommands> 
</CommandBar>