WPF效果第二百一十二篇之MenuItem模板

文章介绍了如何自定义WPF中的MenuItem样式,包括设置透明背景、字体大小、高度等属性,并提供了Role为SubmenuHeader的模板代码,展示了触发器在鼠标悬停和选中时改变背景色和打开子菜单的效果。作者分享了编程过程中的乐趣和挑战,鼓励读者探索更多复杂效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有其他事情一直忙着,也没抽点时间去更新文章;今天来分享一下关于MenuItem的模板;本来是偷懒直接借鉴的现成的代码,结果发现一堆小问题b3d3e9514fcb67122358713d5934aafe.png;没办法还是得自己动手;满怀期待的打开布满灰尘的Blend,最终实现效果:

e7acd295a3a053e5ba585115320391b6.gif

1、前台关于MenuItem样式:

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#FFFFFF"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Margin" Value="0,10,0,0"/>
    <Setter Property="Template" Value="{StaticResource SubmenuItemTemplateKey}"/>
    <Style.Triggers>
        <Trigger Property="Role" Value="SubmenuHeader">
            <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplateKey}"/>
        </Trigger>
    </Style.Triggers>
</Style>

2、关于Role=SubmenuHeader的模板:

<ControlTemplate x:Key="SubmenuHeaderTemplateKey" TargetType="{x:Type MenuItem}">
    <Border CornerRadius="6" Background="{TemplateBinding Background}" BorderThickness="0">
        <Grid SnapsToDevicePixels="true">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="30"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                <Path Grid.Column="2" Width="16" Height="16" Stretch="Uniform" Data="{StaticResource RightArrow}" Fill="{TemplateBinding Foreground}"
                          HorizontalAlignment="Left" Margin="0,0,20,0"/>
            </Grid>
            <Popup x:Name="PART_Popup" AllowsTransparency="true" HorizontalOffset="-1"
                       IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                       PopupAnimation="Scroll" Placement="Right" VerticalOffset="0">
                <Border Margin="0,0" CornerRadius="6" Background="#3F4145" BorderBrush="#FF868585" BorderThickness="1" Width="180">
                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
                                        Grid.IsSharedSizeScope="true" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        KeyboardNavigation.TabNavigation="Cycle"/>
                </Border>
            </Popup>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="HasItems" Value="true"/>
                <Condition Property="IsMouseOver" Value="true"/>
            </MultiTrigger.Conditions>
            <Setter Property="IsSubmenuOpen" Value="true"/>
            <Setter Property="Background" Value="#3D5CE3"/>
            <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="HasItems" Value="true"/>
                <Condition Property="IsChecked" Value="true"/>
                <Condition Property="IsMouseOver" Value="true"/>
            </MultiTrigger.Conditions>
            <Setter Property="IsSubmenuOpen" Value="true"/>
            <Setter Property="Background" Value="#3D5CE3"/>
            <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

最终简单的效果先这样吧6ba7f8ebd156487326ffdfddb4f72be0.png;以后有时间的话,可以再去摸索一下更复杂的效果ae64e5de2b9640055d8df1edc868b3e3.png;编程不息、Bug不止、无Bug、无生活5df1115e254cad45e3c71958d2f26e2c.png;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下!

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值