子菜单弹出背景透明

Posted

技术标签:

【中文标题】子菜单弹出背景透明【英文标题】:Submenu Popup Background to be Transparent 【发布时间】:2021-11-06 16:39:41 【问题描述】:

如何使子菜单弹出框/边框透明?


我设置了菜单和子菜单的样式。当您选择具有子菜单的菜单项时,您会在样式选择周围看到一个灰色框。我该如何设计?

查看菜单Menu Styles and Templates 的样式时,我尝试了控件BorderScrollViewerStackpanel 的多种样式覆盖。我试图覆盖颜色。

<Menu.Resources>
    <Style TargetType="Popup"><Setter Property="AllowsTransparency" Value="True" /></Style>

    <Style TargetType="ScrollViewer"><Setter Property="Background"  Value="Green" /></Style>
    <Style TargetType="StackPanel"><Setter Property="Background"    Value="Firebrick"/></Style>
    <Style TargetType="Border"><Setter Property="Background"        Value="Firebrick" /></Style>   

    <SolidColorBrush x:Key="MenuPopuBrush"      Color="Firebrick" />
    <SolidColorBrush x:Key=" BorderMediumColor" Color="Firebrick" />          
</Menu.Resources>

小例子

<Menu Foreground="Transparent">
   <MenuItem Header="Item 1">
        <MenuItem Header="Sub 1a" />
        <MenuItem Header="Sub 1b"/>
   </MenuItem>
</Menu>

在您的示例中,只需将弹出颜色更改为红色或透明即可。

【问题讨论】:

【参考方案1】:

不确定这是否是唯一的方法,但您可以覆盖 MenuItem 的 ControlTemplate。基本示例:

        <Menu>
        <MenuItem Header="Item 1">
            <MenuItem.Template>
                <ControlTemplate TargetType="MenuItem">
                    <Border Name="Border" >
                        <Grid>
                            <ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
                            <Popup Name="Popup" Placement="Bottom" IsOpen="TemplateBinding IsSubmenuOpen" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
                                <Border Name="SubmenuBorder" SnapsToDevicePixels="True" Background="LightGray" BorderBrush="Transparent" BorderThickness="1" >
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </Border>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                            <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="LightGray"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                            <Setter Property="Foreground" Value="Firebrick" />
                        </Trigger>
                        <Trigger  Property="IsHighlighted" Value="False">
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                            <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="DarkGray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </MenuItem.Template>
            <MenuItem Header="Sub 1a" />
            <MenuItem Header="Sub 1b" />
        </MenuItem>
    </Menu>

您现在可以单独访问组件部分和样式。

【讨论】:

我希望不必拉动引擎来取出火花塞;但情况似乎并非如此...... :-)

以上是关于子菜单弹出背景透明的主要内容,如果未能解决你的问题,请参考以下文章

怎么制作ICO图标使背景颜色为透明?

visual C#中如何设置Lable标签背景透明

背景透明,文字不透明

如何将 ViewController 呈现为具有透明背景的弹出式 VC?

CSS IE背景透明的问题

Qt 子窗口设置为透明