当前位置:   article > 正文

WPF 非常漂亮 MenuItem模板 WPF漂亮导航栏 WPF MenuItem 漂亮界面源代码 可以直接使用的WPF漂亮界面

wpf menuitem

      WPF中的MenuItem控件是导航菜单的重要组成部分,它提供了丰富的定制选项以创建出吸引人的导航界面。通过自定义模板和样式,MenuItem可以展现出各种视觉效果,如渐变色、图标、鼠标悬停效果等。此外,MenuItem还支持子菜单和命令绑定,使得用户界面既美观又功能强大。

以下是一个实例,展示了如何创建一个具有自定义样式的漂亮MenuItem:

 

 

  1. <ControlTemplate x:Key="SubmenuHeaderTemplateKey" TargetType="{x:Type MenuItem}">
  2. <Border CornerRadius="13" Background="{TemplateBinding Background}" BorderThickness="0" Margin="0 0 0 0" Padding="0">
  3. <Grid SnapsToDevicePixels="true" Margin="0 0 0 0">
  4. <Grid>
  5. <Grid.ColumnDefinitions>
  6. <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
  7. <ColumnDefinition Width="*"/>
  8. <ColumnDefinition Width="30"/>
  9. </Grid.ColumnDefinitions>
  10. <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
  11. SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
  12. <Path Grid.Column="2" Width="16" Height="16" Stretch="Uniform" Fill="#FFFFFF"
  13. HorizontalAlignment="Left" Margin="0,0,20,0"/>
  14. </Grid>
  15. <Popup x:Name="PART_Popup" AllowsTransparency="true" HorizontalOffset="-1"
  16. IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
  17. PopupAnimation="Scroll" Placement="Right" VerticalOffset="0">
  18. <Border Margin="0,0" CornerRadius="13" Background="#FFFFFF" BorderBrush="#5a5e66" BorderThickness="1" Width="auto">
  19. <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
  20. Grid.IsSharedSizeScope="true" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
  21. KeyboardNavigation.TabNavigation="Cycle"/>
  22. </Border>
  23. </Popup>
  24. </Grid>
  25. </Border>
  26. <ControlTemplate.Triggers>
  27. <MultiTrigger>
  28. <MultiTrigger.Conditions>
  29. <!--<Condition Property="HasItems" Value="true"/>-->
  30. <Condition Property="IsMouseOver" Value="true"/>
  31. </MultiTrigger.Conditions>
  32. <Setter Property="IsSubmenuOpen" Value="true"/>
  33. <Setter Property="Background" Value="#3D5CE3"/>
  34. <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
  35. <Setter Property="Foreground" Value="#FFFFFF"/>
  36. </MultiTrigger>
  37. <MultiTrigger>
  38. <MultiTrigger.Conditions>
  39. <Condition Property="HasItems" Value="true"/>
  40. <Condition Property="IsChecked" Value="true"/>
  41. <Condition Property="IsMouseOver" Value="true"/>
  42. </MultiTrigger.Conditions>
  43. <Setter Property="IsSubmenuOpen" Value="true"/>
  44. <Setter Property="Background" Value="#3D5CE3"/>
  45. <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
  46. </MultiTrigger>
  47. </ControlTemplate.Triggers>
  48. </ControlTemplate>
  49. <Style TargetType="{x:Type MenuItem}">
  50. <Setter Property="Background" Value="Transparent"/>
  51. <Setter Property="Foreground" Value="#5a5e66"/>
  52. <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
  53. <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
  54. <Setter Property="FontSize" Value="14"/>
  55. <Setter Property="Height" Value="30"/>
  56. <Setter Property="Margin" Value="0,0,0,0"/>
  57. <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplateKey}"/>
  58. <!--<Style.Triggers>
  59. <Trigger Property="Role" Value="SubmenuHeader">
  60. <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplateKey}"/>
  61. </Trigger>
  62. </Style.Triggers>-->
  63. </Style>
  1. <Border BorderBrush="#5a5e66" BorderThickness="1" CornerRadius="13" Margin="20 0 0 0">
  2. <Menu BorderThickness="0" BorderBrush="Transparent" Background="Transparent" VerticalAlignment="Center" FontSize="14">
  3. <MenuItem Header="GOOGLE">
  4. <MenuItem Header="Android移动平台">
  5. <MenuItem Header="手机" />
  6. <MenuItem Header="电视" />
  7. <MenuItem Header="汽车" />
  8. </MenuItem>
  9. <MenuItem Header="Flutter前端开发" />
  10. <MenuItem Header="GO后端开发" />
  11. <MenuItem Header="Chrome浏览器"/>
  12. </MenuItem>
  13. <MenuItem Header="微软">
  14. <MenuItem Header="Windows系统"/>
  15. <MenuItem Header="Office办公系统"/>
  16. <MenuItem Header="C#流行语言" />
  17. <MenuItem Header="VSCode全功能IDE" />
  18. <MenuItem Header="Sqlserver数据库" />
  19. </MenuItem>
  20. <MenuItem Header="小米" >
  21. <MenuItem Header="汽车" />
  22. <MenuItem Header="手机" />
  23. <MenuItem Header="电视"/>
  24. <MenuItem Header="平板电脑"/>
  25. </MenuItem>
  26. <MenuItem Header="退出" />
  27. </Menu>
  28. </Border>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小舞很执着/article/detail/758393
推荐阅读
相关标签
  

闽ICP备14008679号