如何将CommandBar中的更多选项按钮替换为AppBarButton并实现点击展开

嘿，这需求我熟，帮你搞定！下面是具体的实现步骤和代码，完全符合你的要求：

1. 替换默认“更多”按钮为“按钮A” #

我们需要自定义CommandBar的OverflowButtonTemplate，把默认的溢出按钮替换成我们命名为“按钮A”的AppBarButton：

<CommandBar x:Name="MyCustomCommandBar">
    <!-- 主区域的命令按钮 -->
    <AppBarButton Icon="Add" Label="添加"/>
    <AppBarButton Icon="Edit" Label="编辑"/>

    <!-- 溢出区域的命令按钮 -->
    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Delete" Label="删除"/>
        <AppBarButton Icon="Share" Label="分享"/>
        <AppBarButton Icon="Print" Label="打印"/>
    </CommandBar.SecondaryCommands>

    <!-- 自定义溢出按钮模板 -->
    <CommandBar.OverflowButtonTemplate>
        <ControlTemplate TargetType="AppBarButton">
            <AppBarButton x:Name="CustomOverflowBtn"
                          Icon="More" <!-- 这里可以换成你需要的图标 -->
                          Label="按钮A"
                          Click="CustomOverflowBtn_Click">
                <AppBarButton.Style>
                    <StaticResource ResourceKey="AppBarButtonStyle"/>
                </AppBarButton.Style>
            </AppBarButton>
        </ControlTemplate>
    </CommandBar.OverflowButtonTemplate>

2. 设置溢出项的标签显示在底部 #

接下来要配置溢出面板的样式，让所有溢出的AppBarButton标签显示在按钮底部：

<!-- 自定义溢出面板样式 -->
    <CommandBar.OverflowPresenterStyle>
        <Style TargetType="CommandBarOverflowPresenter">
            <!-- 可选：设置溢出项的排列方向，这里用水平排列 -->
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0,8"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <!-- 强制标签显示在按钮底部 -->
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="AppBarButton">
                        <Setter Property="LabelPosition" Value="Bottom"/>
                        <Setter Property="Margin" Value="0,0,8,0"/> <!-- 给按钮之间加间距 -->
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </CommandBar.OverflowPresenterStyle>
</CommandBar>

3. 处理按钮A的点击逻辑 #

最后在后台代码中实现按钮A的点击事件，控制溢出面板的展开和收起，和默认“更多”按钮的行为一致：

private void CustomOverflowBtn_Click(object sender, RoutedEventArgs e)
{
    // 切换溢出面板的显示状态
    MyCustomCommandBar.IsOverflowOpen = !MyCustomCommandBar.IsOverflowOpen;
}

额外说明 #

• 如果你想修改按钮A的图标，只需要把Icon="More"换成你需要的图标（比如Icon="Favorite"、Icon="Setting"等）。
• 溢出项的排列方向可以根据需求调整，把Orientation="Horizontal"改成Vertical就是垂直排列。
• 保持CommandBar的OverflowMode为默认的Auto，这样当窗口宽度变小时，主区域的按钮会自动进入溢出面板。

内容的提问来源于stack exchange，提问作者Roshmi Benny