为了实现自定义的Menu和ContextMenu效果,下面演示代码通过派生ProfessionalColorTable类,在自定义的类中重写ProfessionalColorTable类的相关联的属性,从而实现自定义菜单效果。
using System.Drawing; using System.Windows.Forms; public class CustomToolStripColorTable : ProfessionalColorTable { /// <summary> /// 主菜单项被点击后,展开的下拉菜单面板的边框 /// </summary> public override Color MenuBorder { get { return Color.FromArgb(37, 37, 37); } } /// <summary> /// 鼠标移动到菜单项(主菜单及下拉菜单)时,下拉菜单项的边框 /// </summary> public override Color MenuItemBorder { get { return Color.Transparent; } } #region 顶级菜单被选中背景颜色 public override Color MenuItemSelectedGradientBegin { get { return Color.FromArgb(37, 37, 37); } } public override Color MenuItemSelectedGradientEnd { get { return Color.FromArgb(37, 37, 37); } } #endregion #region 顶级菜单被按下是,菜单项背景色 public override Color MenuItemPressedGradientBegin { get { return Color.Black; } } public override Color MenuItemPressedGradientMiddle { get { return Color.FromArgb(37, 37, 37); } } public override Color MenuItemPressedGradientEnd { get { return Color.Black; } } #endregion /// <summary> /// 菜单项被选中时的颜色 /// </summary> public override Color MenuItemSelected { get { return Color.FromArgb(37, 37, 37); } } #region 下拉菜单面板背景设置(不包括下拉菜单项) //下拉菜单面板背景一共分为2个部分,左边为图像区域,右侧为文本区域,需要分别设置 //ToolStripDropDownBackground设置文本部分的背景色 public override Color ToolStripDropDownBackground { get { return Color.Black; } } //以ImageMarginGradient开头的3个设置的是图像部分的背景色,begin->end是从左到右的顺序 public override Color ImageMarginGradientBegin { get { return Color.Black; } } public override Color ImageMarginGradientMiddle { get { return Color.Black; } } public override Color ImageMarginGradientEnd { get { return Color.Black; } } #endregion }
然后对需要实现自定义风格的菜单(如:contextMenuStrip1)应用如下代码:
contextMenuStrip1.RenderMode = ToolStripRenderMode.Professional; contextMenuStrip1.Renderer = new ToolStripProfessionalRenderer(new CustomToolStripColorTable());
ContextMenu的自定义
1.针对整个ContextMenu, 自定义一个Style,去掉竖分割线
<Style x:Key="DataGridColumnsHeaderContextMenuStyle" TargetType="{x:Type ContextMenu}"> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Grid.IsSharedSizeScope" Value="true"/> <Setter Property="HasDropShadow" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ContextMenu}"> <Border Uid="Border_93"> <Border.Style> <Style TargetType="{x:Type Border}"> <Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.DropShadowKey}}"/> <Style.Triggers> <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect BlurRadius="4" Opacity="0.8" ShadowDepth="1"/> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Uid="Border_50"> <ScrollViewer CanContentScroll="True" Uid="ScrollViewer_9" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Cycle" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ItemsPresenter_5"/> </ScrollViewer> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
2. 针对其中的ItemContainerStyle来写个MenuItem的control template
<Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}"> <Setter Property="Template" Value="{DynamicResource MenuItemControlTemplate1}"/> <Setter Property="Margin" Value="0"></Setter> <Setter Property="Padding" Value="0"></Setter> </Style> <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}"> <Grid x:Name="grid" SnapsToDevicePixels="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" > <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" TargetName="grid" Value="{DynamicResource Brush_PA_CSW_ListBoxItemDefaultHighlight}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#FF9A9A9A"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> 3. contextMenu使用上述style <ContextMenu x:Key="DataGridColumnsHeaderContextMenu" ItemTemplate="{DynamicResource HeaderConfigItemTemplate}" ItemContainerStyle="{DynamicResource MenuItemStyle1}" Style="{DynamicResource DataGridColumnsHeaderContextMenuStyle}" />
以上就是本文通过C#实现Menu和ContextMenu自定义风格及contextMenu自定义的全部内容,希望大家喜欢。
jQuery 上下文菜单插件,支持多级菜单和图标显示,自定义样式实现灵活控制菜单风格。 上下文菜单示例 实例代码: var data = [ [ { text: "剪切(ctrl+x)", action: function () {
我在这里遇到了TreeView绑定和ContextMenu的问题:Selected TreeView项为空 现在我有这个问题:我有ContextMenu (图片显示了我的ContextMenu的样子,不要介意tabItem...)。 正如你所看到的,它只是ContetMenu,没有MenuItem!如果用户单击“关闭”,我想在ViewModel中执行一些操作(发出命令?)。我还想知道他点了哪个按钮
Bootstrap Contextmenu 顾名思义,是基于 Bootstrap 实现的一个右键上下文菜单。
用于创建右键弹出菜单的jQuery插件。
ngx-contextmenu A context menu built with Angular (10) inspired by ui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. Demo Stackb
contextMenu 自由定制页面元素的右键菜单。 最新版本 v2.2.0 原理 该插件通过指定的参数,渲染出一个漂亮的右键菜单,并绑定菜单项点击事件。 需要的参数有: 右键事件e。指定一个事件e,它可能是通过原生js、jq,甚至vue捕捉的;该插件将获取点击的位置,并阻止事件冒泡,屏蔽默认的右键菜单。 菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。 特色 侵入性小,这个插件几