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

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

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>

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