宽度CommandBar (UWP)

Question

如何更改CommandBar的宽度？我想要移动模式下桌面模式的大小。

桌面模式：图像

移动模式：图像

编辑：，这是我的代码，我不使用飞碟。

<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

问题不在于命令栏。您需要在“飞出”中检查您的xaml，并将水平对齐设置为“反方向”中项的右侧。

Answer 2

默认溢出菜单的样式与条形图不同。可以通过将CommandBarOverflowPresenterStyle属性设置为以CommandBarOverflowPresenter为目标的样式来调整样式。默认情况下，溢出菜单根据窗口宽度调整其大小和视觉效果，因此在小窗口/屏幕上，它伸展到完全宽度，只显示沿前缘的边框，而不是整个菜单周围的边框。您可以通过重新绘制菜单模板来覆盖此选项。在下面的示例中，我正在删除一些改变BorderThickness的可视状态，我正在对MaxWidth / MinWidth以及HorizontalAlignment进行硬编码(以防止它在较小的窗口上被拉伸)。

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