WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

2022-07-28 08:06:09

一．前言

　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。

　　本文主要内容：

菜单Menu的自定义样式；
右键菜单ContextMenu的自定义样式；
树控件TreeView的自定义样式，及右键菜单实现。

二．菜单Menu的自定义样式

　　自定义菜单样式的效果图：

　　Menu和ContextMenu样式本身很简单，他们最主要的部分就是MenuItem，MenuItem中包含的内容比较多，如图标、选中状态、二级菜单、二级菜单的指针、快捷键等。使用了字体图标定义菜单项MenuItem样式代码：

WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    <!--菜单项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="&#xe605;" Foreground

码农公寓

相关文章