WinUI3中如何设置CommandBar溢出展开时背景为透明？

方法1：修改CommandBar模板（推荐） #

直接提取并修改CommandBar的默认样式，精准指定溢出菜单的背景为透明，同时保留原有状态样式逻辑：

1. 通过Visual Studio的「编辑模板」→「编辑副本」功能生成CommandBar的完整默认样式
2. 在模板中找到CommandBarOverflowPresenter元素，将其Background属性设置为Transparent
3. 若需要CommandBar本身背景也透明，可在Style的Setter中添加Background="Transparent"

完整样式示例：

<Style x:Key="TransparentCommandBarStyle" TargetType="CommandBar">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource CommandBarForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource CommandBarBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource CommandBarBorderThemeThickness}"/>
    <Setter Property="Padding" Value="{ThemeResource CommandBarPadding}"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CommandBar">
                <Grid x:Name="RootPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ClipToBounds="True">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="ContentRoot" Padding="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <CommandBarContentPanel x:Name="ContentPanel" Grid.Column="0" HorizontalAlignment="Left" Orientation="Horizontal"/>
                        <CommandBarSecondaryCommandsControl x:Name="SecondaryCommandsControl" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Margin="{ThemeResource CommandBarSecondaryCommandsMargin}" Orientation="Horizontal"/>
                    </Grid>
                    <CommandBarOverflowPresenter x:Name="OverflowPresenter" Grid.Row="1" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Top">
                        <CommandBarOverflowPresenter.RenderTransform>
                            <TranslateTransform x:Name="OverflowPresenterTranslateTransform"/>
                        </CommandBarOverflowPresenter.RenderTransform>
                    </CommandBarOverflowPresenter>
                    <VisualStateManager.VisualStateGroups>
                        <!-- 保留默认视觉状态逻辑，无需修改 -->
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用方式：

<CommandBar GridRow="2" Style="{StaticResource TransparentCommandBarStyle}">
    <!-- 你的命令按钮内容 -->
</CommandBar>

方法2：代码后台修改视觉树 #

如果不想修改完整模板，可通过代码遍历视觉树定位溢出菜单元素，直接设置背景透明：

在XAML中绑定Loaded事件：

<CommandBar GridRow="2" Loaded="CommandBar_Loaded">
    <!-- 你的命令按钮内容 -->
</CommandBar>

后台代码：

private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
    if (sender is CommandBar commandBar)
    {
        var overflowPresenter = FindVisualChild<CommandBarOverflowPresenter>(commandBar);
        overflowPresenter?.SetValue(BackgroundProperty, new SolidColorBrush(Colors.Transparent));
    }
}

private T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
        
        var result = FindVisualChild<T>(child);
        if (result != null)
            return result;
    }
    return null;
}

问题原因说明 #

• 直接设置CommandBar.Background="Transparent"导致样式错乱：默认样式中CommandBar的背景在不同状态（如溢出展开、鼠标悬停）下依赖系统资源绑定，直接覆盖会破坏这些状态样式逻辑。
• 基于默认样式设置Background无效：默认模板中CommandBarOverflowPresenter的背景并未直接绑定到CommandBar的Background属性，而是使用独立的样式资源，因此仅修改Style的Background无法影响溢出菜单。

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