当前位置: 首页 > 编程笔记 >

C#实现Menu和ContextMenu自定义风格及contextMenu自定义

郭云
2023-03-14
本文向大家介绍C#实现Menu和ContextMenu自定义风格及contextMenu自定义,包括了C#实现Menu和ContextMenu自定义风格及contextMenu自定义的使用技巧和注意事项,需要的朋友参考一下

为了实现自定义的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数组决定了你想渲染出什么样的菜单。 特色 侵入性小,这个插件几