In order to implement custom Menu and ContextMenu effects, the following demonstration code derives the ProfessionalColorTable class and overwrites the associated properties of the ProfessionalColorTable class in the custom class to achieve a custom menu effect.
using ;
using ;
public class CustomToolStripColorTable : ProfessionalColorTable
{
/// <summary>
/// After the main menu item is clicked, the border of the expanded drop-down menu panel is /// </summary>
public override Color MenuBorder
{
get
{
return (37, 37, 37);
}
}
/// <summary>
/// When the mouse moves to the menu item (main menu and drop-down menu), the border of the drop-down menu item /// </summary>
public override Color MenuItemBorder
{
get
{
return ;
}
}
#region Top menu selected background color public override Color MenuItemSelectedGradientBegin
{
get
{
return (37, 37, 37);
}
}
public override Color MenuItemSelectedGradientEnd
{
get
{
return (37, 37, 37);
}
}
#endregion
#region The top menu is pressed yes, the background color of the menu item public override Color MenuItemPressedGradientBegin
{
get
{
return ;
}
}
public override Color MenuItemPressedGradientMiddle
{
get
{
return (37, 37, 37);
}
}
public override Color MenuItemPressedGradientEnd
{
get
{
return ;
}
}
#endregion
/// <summary>
/// Color when the menu item is selected /// </summary>
public override Color MenuItemSelected
{
get
{
return (37, 37, 37);
}
}
#region drop-down menu panel background settings (not including drop-down menu items) //The background of the drop-down menu panel is divided into 2 parts, the image area on the left and the text area on the right. It needs to be set separately //ToolStripDropDownBackground sets the background color of the text part public override Color ToolStripDropDownBackground
{
get
{
return ;
}
}
//The three settings starting with ImageMarginGradient are the background color of the image part, and begin->end is the order from left to right public override Color ImageMarginGradientBegin
{
get
{
return ;
}
}
public override Color ImageMarginGradientMiddle
{
get
{
return ;
}
}
public override Color ImageMarginGradientEnd
{
get
{
return ;
}
}
#endregion
}
Then apply the following code to a menu that needs to implement a custom style (such as contextMenuStrip1):
= ; = new ToolStripProfessionalRenderer(new CustomToolStripColorTable());
Customization of ContextMenu
1. For the entire ContextMenu, customize a Style and remove the vertical split line
<Style x:Key="DataGridColumnsHeaderContextMenuStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="" Value="true"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="Template">
<>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border U>
<>
<Style TargetType="{x:Type Border}">
<Setter Property="Tag" Value="{DynamicResource {x:Static }}"/>
<>
<DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Effect">
<>
<DropShadowEffect BlurRadius="4" Opacity="0.8" ShadowDepth="1"/>
</>
</Setter>
</DataTrigger>
</>
</Style>
</>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" U>
<ScrollViewer CanContentScroll="True" U
Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<ItemsPresenter ="Cycle" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" U/>
</ScrollViewer>
</Border>
</Border>
</ControlTemplate>
</>
</Setter>
</Style>
2. Write a MenuItem control template for the ItemContainerStyle
<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}" ="0" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Grid> <> <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>
3. contextMenuUse the abovestyle
<ContextMenu x:Key="DataGridColumnsHeaderContextMenu"
ItemTemplate="{DynamicResource HeaderConfigItemTemplate}"
ItemContainerStyle="{DynamicResource MenuItemStyle1}"
Style="{DynamicResource DataGridColumnsHeaderContextMenuStyle}"
/>
The above is all the content of this article implementing the custom style of Menu and ContextMenu and contextMenu customization through C#. I hope you like it.