devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF 制作侧边栏菜单之MenuItem

作者：AllinToyou | 2024-04-26 22:39:10

赞

踩

wpf menuitem

有小伙伴问我有没有做过菜单栏，这我确实没做过，不过现在做还不晚吧，e3cb6c59ca54e4285fe289b4d5cead9d.png

先来做一个MenuItem,使用MVVM模式写，这样创建菜单的时候，只要绑定datacontext，就ok了，使用极为方便，还可以自定义颜色相关的属性。

先来看一下效果：

下面就来看看代码喽：

首先创建一个自定义控件类：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Windows;
  5. using System.Windows.Controls;
  6. using System.Windows.Markup;
  7. using System.Windows.Media;
  8.  
  9.  
  10. namespace WPFDemos
  11. {
  12.     [DefaultProperty("MenuItems")]
  13.     [ContentProperty("MenuItems")]
  14.     [TemplatePart(Name = LB, Type = typeof(ListBox))]
  15.     public class SideMenuItem : Control
  16.     {
  17.         private const string LB = "LB";
  18.         private ListBox _listBox;
  19.         public bool IsExpanded
  20.         {
  21.             get { return (bool)GetValue(IsExpandedProperty); }
  22.             set { SetValue(IsExpandedProperty, value); }
  23.         }
  24.         public static readonly DependencyProperty IsExpandedProperty =
  25.             DependencyProperty.Register("IsExpanded", typeof(bool), typeof(SideMenuItem), new PropertyMetadata(false));
  26.  
  27.  
  28.         public List<object> MenuItems
  29.         {
  30.             get { return (List<object>)GetValue(MenuItemsProperty); }
  31.             set { SetValue(MenuItemsProperty, value); }
  32.         }
  33.         public static readonly DependencyProperty MenuItemsProperty =
  34.             DependencyProperty.Register("MenuItems", typeof(List<object>), typeof(SideMenuItem), new PropertyMetadata(default(List<object>)));
  35.  
  36.  
  37.         public Brush ToggleBackground
  38.         {
  39.             get { return (Brush)GetValue(ToggleBackgroundProperty); }
  40.             set { SetValue(ToggleBackgroundProperty, value); }
  41.         }
  42.         public static readonly DependencyProperty ToggleBackgroundProperty =
  43.             DependencyProperty.Register("ToggleBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x2d, 0x2d, 0x30))));
  44.  
  45.  
  46.         public Brush MenuItemBackground
  47.         {
  48.             get { return (Brush)GetValue(MenuItemBackgroundProperty); }
  49.             set { SetValue(MenuItemBackgroundProperty, value); }
  50.         }
  51.         public static readonly DependencyProperty MenuItemBackgroundProperty =
  52.             DependencyProperty.Register("MenuItemBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x16, 0x18, 0x1D))));
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.         public Brush MenuItemSelectedBackground
  60.         {
  61.             get { return (Brush)GetValue(MenuItemSelectedBackgroundProperty); }
  62.             set { SetValue(MenuItemSelectedBackgroundProperty, value); }
  63.         }
  64.         public static readonly DependencyProperty MenuItemSelectedBackgroundProperty =
  65.             DependencyProperty.Register("MenuItemSelectedBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(Brushes.Green));
  66.  
  67.  
  68.         public static readonly RoutedEvent MenuItemSelectedChangedEvent = EventManager.RegisterRoutedEvent("MenuItemSelectedChanged", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(SideMenuItem));
  69.  
  70.  
  71.         public event RoutedEventHandler MenuItemSelectedChanged
  72.         {
  73.             add { AddHandler(MenuItemSelectedChangedEvent, value); }
  74.             remove { RemoveHandler(MenuItemSelectedChangedEvent, value); }
  75.         }
  76.         public override void OnApplyTemplate()
  77.         {
  78.             base.OnApplyTemplate();
  79.             _listBox = (GetTemplateChild(LB) as ListBox) ?? throw new Exception("listbox Named with \"LB\" not found in the Template");
  80.             _listBox.SelectionChanged -= _listBoxSelectionChanged;
  81.             _listBox.SelectionChanged += _listBoxSelectionChanged;
  82.         }
  83.  
  84.  
  85.         private void _listBoxSelectionChanged(object sender, SelectionChangedEventArgs e)
  86.         {
  87.             if (!(e.Source is ListBox)) return;
  88.             RoutedEventArgs args = new RoutedEventArgs()
  89.             {
  90.                 RoutedEvent = MenuItemSelectedChangedEvent,
  91.                 Source = _listBox,
  92.             };
  93.             RaiseEvent(args);
  94.         }
  95.     }
  96. }

然后创建一个控件的ViewModel类，BaseViewModel类就是大家都知道的基类，就不粘代码了，如果需要可以联系我：

  1. using System.Collections.Generic;
  2. using System.Windows.Media;
  3. namespace WPFDemos
  4. {
  5.     public class SideMenuItemViewModel : BaseViewModel
  6.     {
  7.         private string _headerText;
  8.         public string HeaderText
  9.         {
  10.             get { return _headerText; }
  11.             set
  12.             {
  13.                 _headerText = value;
  14.                 OnPropertyChanged(nameof(HeaderText));
  15.             }
  16.         }
  17.         private List<object> _items = new List<object>();
  18.         public List<object> Items
  19.         {
  20.             get { return _items; }
  21.             set
  22.             {
  23.                 _items = value;
  24.                 OnPropertyChanged(nameof(Items));
  25.             }
  26.         }
  27.         private Geometry _iconGeometry;
  28.         public Geometry IconGeometry
  29.         {
  30.             get { return _iconGeometry; }
  31.             set {
  32.                 _iconGeometry = value;
  33.                 OnPropertyChanged(nameof(IconGeometry));
  34.             }
  35.         }
  36.     }
  37. }

然后在创建一个资源字典SideMenu.xaml,添加控件所需的样式：

  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3.                     xmlns:local="clr-namespace:WPFDemos">
  4.     <Geometry x:Key="DownGeometry">M445.406 731.963L93.35 339.737A87.354 87.354 0 0 1 71 281.387C71 233.123 110.15 194 158.444 194h704.111a87.476 87.476 0 0 1 58.39 22.336c35.95 32.226 38.951 87.474 6.704 123.4L575.593 731.964a87.415 87.415 0 0 1-6.705 6.7c-35.95 32.227-91.235 29.227-123.482-6.7z</Geometry>
  5.     <Geometry x:Key="UpGeometry">M575.594 216.037L927.65 608.263a87.354 87.354 0 0 1 22.35 58.35C950 714.877 910.85 754 862.556 754H158.445a87.476 87.476 0 0 1-58.39-22.336c-35.95-32.226-38.951-87.474-6.704-123.4l352.056-392.227a87.415 87.415 0 0 1 6.705-6.7c35.95-32.227 91.235-29.227 123.482 6.7z</Geometry>
  6.     <Geometry x:Key="IconInfo">M497 87c245.214 0 444 198.786 444 444S742.214 975 497 975 53 776.214 53 531 251.786 87 497 87z m1.15 331.275c-18.423 0-33.357 14.934-33.357 33.357v331.275c0 18.423 14.934 33.357 33.357 33.357 18.423 0 33.358-14.934 33.358-33.357V451.632c0-18.423-14.935-33.357-33.358-33.357zM497 254.938c-24.14 0-43.71 19.054-43.71 42.56 0 23.504 19.57 42.559 43.71 42.559s43.71-19.055 43.71-42.56c0-23.505-19.57-42.56-43.71-42.56z</Geometry>
  7.  
  8.  
  9.     <Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton">
  10.         <Setter Property="Background" Value="Transparent"/>
  11.         <Setter Property="VerticalContentAlignment" Value="Center"/>
  12.         <Setter Property="Padding" Value="0"/>
  13.         <Setter Property="Margin" Value="0"/>
  14.         <Setter Property="VerticalAlignment" Value="Center"/>
  15.         <Setter Property="HorizontalContentAlignment" Value="Center"/>
  16.         <Setter Property="BorderThickness" Value="0"/>
  17.         <Setter Property="HorizontalAlignment" Value="Center"/>
  18.         <Setter Property="Template">
  19.             <Setter.Value>
  20.                 <ControlTemplate TargetType="ToggleButton">
  21.                     <Border SnapsToDevicePixels="true"
  22.                             BorderThickness="{TemplateBinding BorderThickness}"
  23.                             BorderBrush="{TemplateBinding BorderBrush}"
  24.                             Background="{TemplateBinding Background}">
  25.                         <ContentPresenter Name="UnCheckedElement"
  26.                             Margin="{TemplateBinding Padding}"
  27.                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  28.                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  29.                             RecognizesAccessKey="True"
  30.                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  31.                     </Border>
  32.                     <ControlTemplate.Triggers>
  33.                         <Trigger Property="IsMouseOver" Value="True">
  34.                             <Setter Property="Opacity" Value="0.9"/>
  35.                         </Trigger>
  36.                         <Trigger Property="IsPressed" Value="True">
  37.                             <Setter Property="Opacity" Value="0.6"/>
  38.                         </Trigger>
  39.                         <Trigger Property="IsEnabled" Value="False">
  40.                             <Setter Property="Opacity" Value="0.4"/>
  41.                         </Trigger>
  42.                     </ControlTemplate.Triggers>
  43.                 </ControlTemplate>
  44.             </Setter.Value>
  45.         </Setter>
  46. </Style>
  47.     <Style x:Key="MenuHeaderStyle1" TargetType="Expander">
  48.         <Setter Property="Foreground" Value="LightGray" />
  49.         <Setter Property="Background" Value="#2D2D30" />
  50.         <Setter Property="HorizontalContentAlignment" Value="Left" />
  51.         <Setter Property="VerticalContentAlignment" Value="Center" />
  52.         <Setter Property="BorderThickness" Value="0" />
  53.         <Setter Property="MinHeight" Value="50" />
  54.         <Setter Property="MinWidth" Value="220" />
  55.         <Setter Property="FontSize" Value="14" />
  56.         <Setter Property="Template" >
  57.             <Setter.Value>
  58.                 <ControlTemplate TargetType="Expander">
  59.                     <Grid>
  60.                         <Grid.RowDefinitions>
  61.                             <RowDefinition Height="Auto" />
  62.                             <RowDefinition Height="Auto" />
  63.                         </Grid.RowDefinitions>
  64.                         <Border x:Name="BorderHeader"
  65.                                 ClipToBounds="True"
  66.                                 BorderBrush="{TemplateBinding BorderBrush}" 
  67.                                 BorderThickness="{TemplateBinding BorderThickness}" 
  68.                                 Background="{TemplateBinding Background}">
  69.                             <ToggleButton HorizontalAlignment="Stretch" 
  70.                                           HorizontalContentAlignment="Stretch" 
  71.                                           Focusable="False" 
  72.                                           Padding="10,0,0,0" 
  73.                                           Foreground="{TemplateBinding Foreground}" 
  74.                                           IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
  75.                                           Width="{TemplateBinding Width}" 
  76.                                           Height="{TemplateBinding MinHeight}" 
  77.                                           Style="{StaticResource ToggleButtonStyle1}">
  78.                                 <Grid>
  79.                                     <Grid.ColumnDefinitions>
  80.                                         <ColumnDefinition Width="40" />
  81.                                         <ColumnDefinition />
  82.                                         <ColumnDefinition Width="32" />
  83.                                     </Grid.ColumnDefinitions>
  84.                                     <Path Name="PathIcon" 
  85.                                           IsHitTestVisible="False" 
  86.                                           Grid.Column="0" 
  87.                                           Stretch="Uniform" 
  88.                                           Fill="{TemplateBinding Foreground}" 
  89.                                           Height="16"
  90.                                           Data="{Binding DataContext.IconGeometry,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"
  91.                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  92.                                           HorizontalAlignment="Center" />
  93.                                     <ContentPresenter ContentSource="Header" 
  94.                                                       Grid.Column="1"
  95.                                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  96.                                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
  97.                                     <Path Name="PathArrow" 
  98.                                           IsHitTestVisible="False" 
  99.                                           Grid.Column="2" 
  100.                                           Stretch="Uniform" 
  101.                                           Fill="{TemplateBinding Foreground}" 
  102.                                           Data="{StaticResource DownGeometry}" 
  103.                                           Margin="0,0,10,0" Width="12" 
  104.                                           Height="12" 
  105.                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  106.                                           HorizontalAlignment="Center" />
  107.                                 </Grid>
  108.                             </ToggleButton>
  109.                         </Border>
  110.                         <Border x:Name="LeftFlag" Width="5" Visibility="Collapsed" Background="#009688" HorizontalAlignment="Left"/>
  111.                         <ContentPresenter Name="ExpandSite" Visibility="Collapsed" Grid.Row="1" />
  112.                     </Grid>
  113.                     <ControlTemplate.Triggers>
  114.                         <Trigger Property="IsExpanded" Value="true">
  115.                             <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible" />
  116.                             <Setter Property="Data" TargetName="PathArrow" Value="{StaticResource UpGeometry}" />
  117.                         </Trigger>
  118.                         <Trigger Property="IsMouseOver" Value="True" SourceName="BorderHeader">
  119.                             <Setter Property="Visibility" Value="Visible" TargetName="LeftFlag" />
  120.                             <Setter Property="Foreground" Value="White" />
  121.                         </Trigger>
  122.                         <Trigger Property="IsExpanded" Value="True">
  123.                             <Setter Property="Visibility" Value="Visible" TargetName="LeftFlag" />
  124.                             <Setter Property="Foreground" Value="White" />
  125.                         </Trigger>
  126.                     </ControlTemplate.Triggers>
  127.                 </ControlTemplate>
  128.             </Setter.Value>
  129.         </Setter>
  130. </Style>
  131.     <Style x:Key="ListBoxStyle1" TargetType="ListBox">
  132.         <Setter Property="BorderThickness" Value="0"/>
  133.         <Setter Property="Margin" Value="0"/>
  134.         <Setter Property="Padding" Value="0"/>
  135.         <Setter Property="Background" Value="Red"/>
  136.         <Setter Property="Template">
  137.             <Setter.Value>
  138.                 <ControlTemplate TargetType="ListBox">
  139.                     <Border  BorderThickness="{TemplateBinding BorderThickness}">
  140.                         <ScrollViewer Margin="{TemplateBinding Padding}"
  141.                                     Focusable="false">
  142.                             <StackPanel IsItemsHost="True" />
  143.                         </ScrollViewer>
  144.                     </Border>
  145.                 </ControlTemplate>
  146.             </Setter.Value>
  147.         </Setter>
  148. </Style>
  149.     <Style x:Key="MenuItemStyle1" TargetType="ListBoxItem">
  150.         <Setter Property="SnapsToDevicePixels" Value="true"/>
  151.         <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  152.         <Setter Property="Foreground" Value="LightGray"/>
  153.         <Setter Property="Margin" Value="0"/>
  154.         <Setter Property="Padding" Value="0"/>
  155.         <Setter Property="MinHeight" Value="40"/>
  156.         <Setter Property="Template">
  157.             <Setter.Value>
  158.                 <ControlTemplate TargetType="ListBoxItem">
  159.                     <Border Name="Border"
  160.                             BorderThickness="0"
  161.                                 Padding="40 0 0 0" 
  162.                                 Background="{Binding MenuItemBackground,Mode=TwoWay,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}" 
  163.                                 SnapsToDevicePixels="True">
  164.                         <ContentPresenter VerticalAlignment="Center"/>
  165.                     </Border>
  166.                     <ControlTemplate.Triggers>
  167.                         <Trigger Property="IsSelected" Value="true">
  168.                             <Setter TargetName="Border" Property="Background" Value="{Binding MenuItemSelectedBackground,Mode=TwoWay,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"/>
  169.                             <Setter Property="Foreground" Value="White"/>
  170.                         </Trigger>
  171.                         <Trigger Property="IsEnabled" Value="false">
  172.                             <Setter Property="Foreground" Value="LightGray"/>
  173.                         </Trigger>
  174.                     </ControlTemplate.Triggers>
  175.                 </ControlTemplate>
  176.             </Setter.Value>
  177.         </Setter>
  178. </Style>
  179.  
  180.  
  181.     <Style TargetType="local:SideMenuItem">
  182.         <Setter Property="Template">
  183.             <Setter.Value>
  184.                 <ControlTemplate TargetType="local:SideMenuItem">
  185.                     <Expander BorderThickness="0"
  186.                               Header="{Binding HeaderText}" 
  187.                               IsExpanded="{Binding IsExpanded,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"
  188.                               Background="{TemplateBinding ToggleBackground}" 
  189.                               Style="{StaticResource MenuHeaderStyle1}">
  190.                         <ListBox x:Name="LB"
  191.                             Style="{StaticResource ListBoxStyle1}"
  192.                                  ItemsSource="{Binding Items}"
  193.                                  ItemContainerStyle="{StaticResource MenuItemStyle1}">
  194.                         </ListBox>
  195.                     </Expander>
  196.                 </ControlTemplate>
  197.             </Setter.Value>
  198.         </Setter>
  199. </Style>
  200. </ResourceDictionary>

然后在App.xaml里面添加引用：

  1. <Application x:Class="WPFDemos.App"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:local="clr-namespace:WPFDemos">
  5.     <Application.Resources>
  6.         <ResourceDictionary>
  7.             <ResourceDictionary.MergedDictionaries>
  8.                 <ResourceDictionary Source="pack://application:,,,/WPFDemos;component/Styles/SideMenu.xaml"/>
  9.             </ResourceDictionary.MergedDictionaries>
  10.         </ResourceDictionary>
  11.     </Application.Resources>
  12. </Application>

最后就是创建一个窗体使用控件喽：

  1. <Window x:Class="WPFDemos.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WPFDemos"
  7.         mc:Ignorable="d"
  8.         x:Name="widnow"
  9.         UseLayoutRounding="True"
  10.         Background="LightBlue"
  11.         Title="下拉菜单控件" Height="450" Width="800">
  12.     <Grid>
  13.         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0 20 0 0">
  14.             <local:SideMenuItem DataContext="{Binding ItemViewModel}"
  15.                             MenuItemSelectedChanged="S"/>
  16.  
  17.  
  18.             <local:SideMenuItem DataContext="{Binding ItemViewModel}"
  19.                             Margin="10 0 0 0"
  20.                             MenuItemBackground="#24ACF2"
  21.                             MenuItemSelectedBackground="YellowGreen"
  22.                             ToggleBackground="#007ACC"
  23.                             MenuItemSelectedChanged="S"/>
  24.         </StackPanel>
  25.         <TextBlock x:Name="log" HorizontalAlignment="Center" FontSize="30" VerticalAlignment="Bottom" Margin="0 0 0 50"/>
  26.     </Grid>
  27. </Window>

窗体的后台代码如下，定义了viewmodel实体和绑定了方法：

  1. using System.Collections.Generic;
  2. using System.Windows;
  3. using System.Windows.Controls;
  4. using System.Windows.Media;
  5. namespace WPFDemos
  6. {
  7.     public partial class MainWindow : Window
  8.     {
  9.         public SideMenuItemViewModel ItemViewModel { get; set; }
  10.         public MainWindow()
  11.         {
  12.             ItemViewModel = new SideMenuItemViewModel()
  13.             {
  14.                 HeaderText = "快速开始",
  15.                 IconGeometry = FindResource("IconInfo") as Geometry,
  16.                 Items = new List<object>()
  17.                 {
  18.                     "5.0新变化",
  19.                     "第一个项目",
  20.                     "第一个模块",
  21.                     "自定义用户",
  22.                     "捐赠",
  23.                     "FAQ"
  24.                 }
  25.             };
  26.             InitializeComponent();
  27.             DataContext = this;
  28.         }
  29.         private void S(object sender, RoutedEventArgs e)
  30.         {
  31.             var s = e.OriginalSource as ListBox;
  32.             var str = s.SelectedItem;
  33.             log.Text = str.ToString();
  34.         }
  35.     }
  36. }

这里，视频中演示的效果就实现啦，效果图如下：

c4c18d1241c450aaac4b1b715e4d70af.png

结束喽~

如果喜欢，点个赞呗~

-----------------------------------

公众号【Csharp编程大全】，需要进技术群交流的，请添加小编mm1552923！

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号