一.前言
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
本文主要内容:
- 菜单Menu的自定义样式;
- 右键菜单ContextMenu的自定义样式;
- 树控件TreeView的自定义样式,及右键菜单实现。
二.菜单Menu的自定义样式
自定义菜单样式的效果图:
Menu和ContextMenu样式本身很简单,他们最主要的部分就是MenuItem,MenuItem中包含的内容比较多,如图标、选中状态、二级菜单、二级菜单的指针、快捷键等。 使用了字体图标定义菜单项MenuItem样式代码:
<!--菜单项MenuItem样式FIconMenuItem-->
<Style x:Key="FIconMenuItem" TargetType="{x:Type MenuItem}">
<Setter Property="BorderBrush" Value="{StaticResource MenuBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="{StaticResource MenuBackground}"/>
<Setter Property="Foreground" Value="{StaticResource MenuForeground}"/>
<Setter Property="FontSize" Value="{StaticResource FontSize}"/>
<Setter Property="Height" Value="28"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="local:ControlAttachProperty.FIconSize" Value="22"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<!--Item-->
<Border x:Name="border" Background="Transparent" Height="{TemplateBinding Height}" Opacity="1">
<Grid VerticalAlignment="Center" Margin="{TemplateBinding Margin}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="icon_col" MaxWidth="35" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition Width="16" x:Name="arrow_col" SharedSizeGroup="MenumItemArrow"/>
</Grid.ColumnDefinitions>
<!--icon-->
<TextBlock x:Name="PART_Icon" Text="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" Margin="5,1,1,1"
FontSize="{TemplateBinding local:ControlAttachProperty.FIconSize}" Style="{StaticResource FIcon}"/>
<!--Header-->
<ContentPresenter Grid.Column="1" x:Name="txtHeader" Margin="3,1,5,1" MinWidth="90"
RecognizesAccessKey="True" VerticalAlignment="Center" ContentSource="Header"/>
<!--快捷键 InputGestureText 暂不支持你了 -->
<TextBlock Grid.Column="2" Margin="3,1,3,1" x:Name="IGTHost" Text="{TemplateBinding InputGestureText}"
FontSize="{TemplateBinding FontSize}"
VerticalAlignment="Center" Visibility="Visible" Foreground="{TemplateBinding Foreground}" />
<!--右指针-->
<TextBlock x:Name="PART_Arrow" Grid.Column="3" Text