WPF 制作侧边栏菜单之MenuItem

05296

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

先来看一下效果：

image

 

下面就来看看代码喽：

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

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using System.Windows.Media;

namespace WPFDemos
{
    [DefaultProperty("MenuItems")]
    [ContentProperty("MenuItems")]
    [TemplatePart(Name = LB, Type = typeof(ListBox))]
    public class SideMenuItem : Control
    {
        private const string LB = "LB";
        private ListBox _listBox;
        public bool IsExpanded
        {
            get { return (bool)GetValue(IsExpandedProperty); }
            set { SetValue(IsExpandedProperty, value); }
        }
        public static readonly DependencyProperty IsExpandedProperty =
            DependencyProperty.Register("IsExpanded", typeof(bool), typeof(SideMenuItem), new PropertyMetadata(false));

        public List<object> MenuItems
        {
            get { return (List<object>)GetValue(MenuItemsProperty); }
            set { SetValue(MenuItemsProperty, value); }
        }
        public static readonly DependencyProperty MenuItemsProperty =
            DependencyProperty.Register("MenuItems", typeof(List<object>), typeof(SideMenuItem), new PropertyMetadata(default(List<object>)));

        public Brush ToggleBackground
        {
            get { return (Brush)GetValue(ToggleBackgroundProperty); }
            set { SetValue(ToggleBackgroundProperty, value); }
        }
        public static readonly DependencyProperty ToggleBackgroundProperty =
            DependencyProperty.Register("ToggleBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x2d, 0x2d, 0x30))));

        public Brush MenuItemBackground
        {
            get { return (Brush)GetValue(MenuItemBackgroundProperty); }
            set { SetValue(MenuItemBackgroundProperty, value); }
        }
        public static readonly DependencyProperty MenuItemBackgroundProperty =
            DependencyProperty.Register("MenuItemBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x16, 0x18, 0x1D))));



        public Brush MenuItemSelectedBackground
        {
            get { return (Brush)GetValue(MenuItemSelectedBackgroundProperty); }
            set { SetValue(MenuItemSelectedBackgroundProperty, value); }
        }
        public static readonly DependencyProperty MenuItemSelectedBackgroundProperty =
            DependencyProperty.Register("MenuItemSelectedBackground", typeof(Brush), typeof(SideMenuItem), new PropertyMetadata(Brushes.Green));

        public static readonly RoutedEvent MenuItemSelectedChangedEvent = EventManager.RegisterRoutedEvent("MenuItemSelectedChanged", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(SideMenuItem));

        public event RoutedEventHandler MenuItemSelectedChanged
        {
            add { AddHandler(MenuItemSelectedChangedEvent, value); }
            remove { RemoveHandler(MenuItemSelectedChangedEvent, value); }
        }
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _listBox = (GetTemplateChild(LB) as ListBox) ?? throw new Exception("listbox Named with \"LB\" not found in the Template");
            _listBox.SelectionChanged -= _listBoxSelectionChanged;
            _listBox.SelectionChanged += _listBoxSelectionChanged;
        }

        private void _listBoxSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (!(e.Source is ListBox)) return;
            RoutedEventArgs args = new RoutedEventArgs()
            {
                RoutedEvent = MenuItemSelectedChangedEvent,
                Source = _listBox,
            };
            RaiseEvent(args);
        }
    }
}

然后创建一个控件的ViewModel类，BaseViewModel类就是大家都知道的基类，就不粘代码了：

using System.Collections.Generic;
using System.Windows.Media;
namespace WPFDemos
{
    public class SideMenuItemViewModel : BaseViewModel
    {
        private string _headerText;
        public string HeaderText
        {
            get { return _headerText; }
            set
            {
                _headerText = value;
                OnPropertyChanged(nameof(HeaderText));
            }
        }
        private List<object> _items = new List<object>();
        public List<object> Items
        {
            get { return _items; }
            set
            {
                _items = value;
                OnPropertyChanged(nameof(Items));
            }
        }
        private Geometry _iconGeometry;
        public Geometry IconGeometry
        {
            get { return _iconGeometry; }
            set {
                _iconGeometry = value;
                OnPropertyChanged(nameof(IconGeometry));
            }
        }
    }
}

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

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFDemos">
    <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>
    <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>
    <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>

    <Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border SnapsToDevicePixels="true"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter Name="UnCheckedElement"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            RecognizesAccessKey="True"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="0.9"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Opacity" Value="0.6"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.4"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    <Style x:Key="MenuHeaderStyle1" TargetType="Expander">
        <Setter Property="Foreground" Value="LightGray" />
        <Setter Property="Background" Value="#2D2D30" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="MinHeight" Value="50" />
        <Setter Property="MinWidth" Value="220" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="Expander">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Border x:Name="BorderHeader"
                                ClipToBounds="True"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}">
                            <ToggleButton HorizontalAlignment="Stretch" 
                                          HorizontalContentAlignment="Stretch" 
                                          Focusable="False" 
                                          Padding="10,0,0,0" 
                                          Foreground="{TemplateBinding Foreground}" 
                                          IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                          Width="{TemplateBinding Width}" 
                                          Height="{TemplateBinding MinHeight}" 
                                          Style="{StaticResource ToggleButtonStyle1}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="40" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="32" />
                                    </Grid.ColumnDefinitions>
                                    <Path Name="PathIcon" 
                                          IsHitTestVisible="False" 
                                          Grid.Column="0" 
                                          Stretch="Uniform" 
                                          Fill="{TemplateBinding Foreground}" 
                                          Height="16"
                                          Data="{Binding DataContext.IconGeometry,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="Center" />
                                    <ContentPresenter ContentSource="Header" 
                                                      Grid.Column="1"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    <Path Name="PathArrow" 
                                          IsHitTestVisible="False" 
                                          Grid.Column="2" 
                                          Stretch="Uniform" 
                                          Fill="{TemplateBinding Foreground}" 
                                          Data="{StaticResource DownGeometry}" 
                                          Margin="0,0,10,0" Width="12" 
                                          Height="12" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="Center" />
                                </Grid>
                            </ToggleButton>
                        </Border>
                        <Border x:Name="LeftFlag" Width="5" Visibility="Collapsed" Background="#009688" HorizontalAlignment="Left"/>
                        <ContentPresenter Name="ExpandSite" Visibility="Collapsed" Grid.Row="1" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="true">
                            <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible" />
                            <Setter Property="Data" TargetName="PathArrow" Value="{StaticResource UpGeometry}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True" SourceName="BorderHeader">
                            <Setter Property="Visibility" Value="Visible" TargetName="LeftFlag" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="Visibility" Value="Visible" TargetName="LeftFlag" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    <Style x:Key="ListBoxStyle1" TargetType="ListBox">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border  BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer Margin="{TemplateBinding Padding}"
                                    Focusable="false">
                            <StackPanel IsItemsHost="True" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    <Style x:Key="MenuItemStyle1" TargetType="ListBoxItem">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="LightGray"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="MinHeight" Value="40"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border"
                            BorderThickness="0"
                                Padding="40 0 0 0" 
                                Background="{Binding MenuItemBackground,Mode=TwoWay,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}" 
                                SnapsToDevicePixels="True">
                        <ContentPresenter VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{Binding MenuItemSelectedBackground,Mode=TwoWay,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="LightGray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

    <Style TargetType="local:SideMenuItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:SideMenuItem">
                    <Expander BorderThickness="0"
                              Header="{Binding HeaderText}" 
                              IsExpanded="{Binding IsExpanded,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SideMenuItem}}"
                              Background="{TemplateBinding ToggleBackground}" 
                              Style="{StaticResource MenuHeaderStyle1}">
                        <ListBox x:Name="LB"
                            Style="{StaticResource ListBoxStyle1}"
                                 ItemsSource="{Binding Items}"
                                 ItemContainerStyle="{StaticResource MenuItemStyle1}">
                        </ListBox>
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
</ResourceDictionary>

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

<Application x:Class="WPFDemos.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPFDemos">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/WPFDemos;component/Styles/SideMenu.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

<Window x:Class="WPFDemos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemos"
        mc:Ignorable="d"
        x:Name="widnow"
        UseLayoutRounding="True"
        Background="LightBlue"
        Title="下拉菜单控件" Height="450" Width="800">
    <Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0 20 0 0">
            <local:SideMenuItem DataContext="{Binding ItemViewModel}"
                            MenuItemSelectedChanged="S"/>

            <local:SideMenuItem DataContext="{Binding ItemViewModel}"
                            Margin="10 0 0 0"
                            MenuItemBackground="#24ACF2"
                            MenuItemSelectedBackground="YellowGreen"
                            ToggleBackground="#007ACC"
                            MenuItemSelectedChanged="S"/>
        </StackPanel>
        <TextBlock x:Name="log" HorizontalAlignment="Center" FontSize="30" VerticalAlignment="Bottom" Margin="0 0 0 50"/>
    </Grid>
</Window>

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

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WPFDemos
{
    public partial class MainWindow : Window
    {
        public SideMenuItemViewModel ItemViewModel { get; set; }
        public MainWindow()
        {
            ItemViewModel = new SideMenuItemViewModel()
            {
                HeaderText = "快速开始",
                IconGeometry = FindResource("IconInfo") as Geometry,
                Items = new List<object>()
                {
                    "5.0新变化",
                    "第一个项目",
                    "第一个模块",
                    "自定义用户",
                    "捐赠",
                    "FAQ"
                }
            };
            InitializeComponent();
            DataContext = this;
        }
        private void S(object sender, RoutedEventArgs e)
        {
            var s = e.OriginalSource as ListBox;
            var str = s.SelectedItem;
            log.Text = str.ToString();
        }
    }
}

ok,完成

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
WPF
喜欢就支持一下吧
点赞6 分享
gxy01的头像-WPF中文社区
WPF 制作侧边菜单 SideMenu-WPF中文社区
WPF 制作侧边菜单 SideMenu
WPF 制作侧边菜单 SideMenu
5个月前 1438
WPF 修改(优化)Menu菜单的样式-WPF中文社区
WPF 修改(优化)Menu菜单的样式
WPF 修改(优化)Menu菜单的样式
5个月前 534
WPF 自定义DialogWindow弹出方式-WPF中文社区
WPF 自定义DialogWindow弹出方式
WPF 自定义DialogWindow弹出方式
5个月前 486
WPF 使用装饰器给控件添加遮罩层-WPF中文社区
WPF 使用装饰器给控件添加遮罩层
WPF 使用装饰器给控件添加遮罩层
5个月前 470
WPF TreeView控件样式美化-WPF中文社区
WPF TreeView控件样式美化
WPF TreeView控件样式美化
5个月前 456
WPF Slider控件样式优化美化-WPF中文社区
WPF Slider控件样式优化美化
WPF Slider控件样式优化美化
5个月前 334
相关推荐
WPF 制作侧边菜单 SideMenu-WPF中文社区
WPF 制作侧边菜单 SideMenu
WPF 制作侧边菜单 SideMenu
5个月前 1438
WPF 修改(优化)Menu菜单的样式-WPF中文社区
WPF 修改(优化)Menu菜单的样式
WPF 修改(优化)Menu菜单的样式
5个月前 534
WPF 制作侧边栏菜单之MenuItem-WPF中文社区
WPF 制作侧边栏菜单之MenuItem
WPF 制作侧边栏菜单之MenuItem
5个月前 529
WPF 自定义DialogWindow弹出方式-WPF中文社区
WPF 自定义DialogWindow弹出方式
WPF 自定义DialogWindow弹出方式
5个月前 486
WPF 使用装饰器给控件添加遮罩层-WPF中文社区
WPF 使用装饰器给控件添加遮罩层
WPF 使用装饰器给控件添加遮罩层
5个月前 470
WPF TreeView控件样式美化-WPF中文社区
WPF TreeView控件样式美化
WPF TreeView控件样式美化
5个月前 456
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]

    暂无评论内容

每日一言
近期评论
gxy01的头像-WPF中文社区

gxy015个月前2

沙发是我的了
标签云
异常wpf