命令栏按钮错误可视化whit IsDynamicOverflowEnabled

Question

我有一个带按钮的简单酒吧指挥官。当我尝试调整窗口大小时，启用IsDynamicOverflowEnabled，当命令栏中没有空格时，主按钮移动到辅助按钮。 这会产生这个图形问题：

选择按钮被剪切。

这是commandBar的XAML：

<CommandBar x:Name="command" DefaultLabelPosition="Right" IsDynamicOverflowEnabled="True">

这适用于任何appBarButton：

<AppBarButton x:Name="searchAppBarButton" Style="{StaticResource AppBarButtonRevealStyle}" ToolTipService.ToolTip="Search" Click="searchAppBarButton_Click" Label="Search">
     <AppBarButton.Content>
            <FontIcon x:Name="IconSearch" FontFamily="Segoe MDL2 Assets" Glyph="&#xE094;" />
     </AppBarButton.Content>
</AppBarButton>

更新： 我发现了问题，问题是appbarbutton的样式AppBarButtonRevealStyle。 删除样式正常工作。 这是完整的代码：

        <CommandBar Background="Transparent" DefaultLabelPosition="Right" IsDynamicOverflowEnabled="True">
        <CommandBar.Content>
            <TextBlock Margin="10,0,0,0" Style="{StaticResource HeaderTextBlockStyle}"
                    FontSize="40"
                    Text="Command Bar"/>
        </CommandBar.Content>
        <CommandBar.PrimaryCommands>
            <AppBarButton  ToolTipService.ToolTip="Layout" Style="{StaticResource AppBarButtonRevealStyle}" Label="Layout">
                <AppBarButton.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE81E;" />
                </AppBarButton.Content>
            </AppBarButton>
            <AppBarButton  ToolTipService.ToolTip="Layout" Style="{StaticResource AppBarButtonRevealStyle}" Label="Layout">
                <AppBarButton.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE81E;" />
                </AppBarButton.Content>
            </AppBarButton>
            <AppBarButton  ToolTipService.ToolTip="Layout" Style="{StaticResource AppBarButtonRevealStyle}" Label="Layout">
                <AppBarButton.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE81E;" />
                </AppBarButton.Content>
            </AppBarButton>
            <AppBarButton  ToolTipService.ToolTip="Layout" Style="{StaticResource AppBarButtonRevealStyle}" Label="Layout">
                <AppBarButton.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE81E;" />
                </AppBarButton.Content>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton x:Name="clearAllRecentDocument" ToolTipService.ToolTip="Clear All" 
                          Label="Clear All"
                          Icon="Delete" LabelPosition="Collapsed" ></AppBarButton>
        </CommandBar.SecondaryCommands>

Answer 1

唷！经过大量的试验，并通过视觉状态研究风格的更深层次，结果发现引起这种问题的问题很容易解决。

背景：

因此控件的IsDynamicOverflowEnabled属性与3个Visual状态有关，即：

1. 溢出
2. OverflowWithToggleButtons
3. OverflowWithMenuIcons

现在，在你的情况下，OverflowWithMenuIcons视觉状态被触发（这更像是一个FYI，以防你想在触发器上应用某种特殊行为）。

问题：

问题是，在样式AppBarButtonRevealStyle中，顶部有两个Setters：

<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="68" />

因此，即使内容适应新布局，AppBarButton仍然有HardCoded Width 68。此外，由于HorizontalAlignment设置为左，即使控件占用更多宽度，它仍然不会覆盖整个可点击区域。

解决方案：

这很简单，将Width设置为Auto将允许内容自动更改其宽度并将HorizontalAlignment设置为Stretch将允许控件扩展自己以延伸到父级width以覆盖点击区域。修改后的代码如下：

<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="Auto" />

如何获得风格？

也很简单，点击代码中的AppBarButtonRevealStyle并按F12，然后打开Generic.xaml，从那里复制样式（因为你可以＆＃39} ;在那里进行修改）并将其粘贴到<Page.Resources>的{​​{1}}标记中，然后替换上面的代码。

仅供参考，我已将修改后的样式放在下面：

修改后的样式：

xaml

我希望这可以解决查询，如果评论部分中有任何内容，请告诉我