WPF实现Win10汉堡菜单

忘是亡心i 2022-09-17 03:04 204阅读 0赞

有小伙伴提出需要实现Win10汉堡菜单效果。

![图片][e4128eb38b8ff214c43415461e23d2c5.png]

由于在WPF中没有现成的类似UWP的汉堡菜单，所以我们自己实现一个。

—

代码如下

一、创建 Win10Menu.cs 菜单继承 ContentControl 代码如下。

![图片][340d03a09c730f98ab8e300980ff7a95.png]

Win10Menu.cs实现思路如下

1、IsOpen ：判定是否展开、收起 。

2、Content ：存放菜单集合。

3、SelectionIndicatorColor ：选中菜单状态栏颜色。

4、MenuItemForeground：菜单集字体颜色。

using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace WPFDevelopers.Controls
    {
        public class Win10Menu : ContentControl
        {
            public new List<Win10MenuItem> Content
            {
                get { return (List<Win10MenuItem>)GetValue(ContentProperty); }
                set { SetValue(ContentProperty, value); }
            }
    
            public new static readonly DependencyProperty ContentProperty =
                DependencyProperty.Register("Content", typeof(List<Win10MenuItem>), typeof(Win10Menu),new FrameworkPropertyMetadata(null));
    
            static Win10Menu()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(Win10Menu), new FrameworkPropertyMetadata(typeof(Win10Menu)));
            }
    
            public override void BeginInit()
            {
                Content = new List<Win10MenuItem>();
                base.BeginInit();
            }
    
            public bool IsOpen
            {
                get { return (bool)GetValue(IsOpenProperty); }
                set
                {
                    SetValue(IsOpenProperty, value);
                }
            }
    
            public static readonly DependencyProperty IsOpenProperty =
                DependencyProperty.Register("IsOpen", typeof(bool), typeof(Win10Menu), new PropertyMetadata(true));
    
    
            public System.Windows.Media.Brush MenuIconColor
            {
                get { return (System.Windows.Media.Brush)GetValue(MenuIconColorProperty); }
                set { SetValue(MenuIconColorProperty, value); }
            }
    
            public static readonly DependencyProperty MenuIconColorProperty =
                DependencyProperty.Register("MenuIconColor", typeof(System.Windows.Media.Brush), typeof(Win10Menu), new PropertyMetadata(Brushes.White));
    
    
            public Brush SelectionIndicatorColor
            {
                get { return (Brush)GetValue(SelectionIndicatorColorProperty); }
                set { SetValue(SelectionIndicatorColorProperty, value); }
            }
    
            public static readonly DependencyProperty SelectionIndicatorColorProperty =
                DependencyProperty.Register("SelectionIndicatorColor", typeof(Brush), typeof(Win10Menu), new PropertyMetadata(Brushes.Red));
    
            public Brush MenuItemForeground
            {
                get { return (Brush)GetValue(MenuItemForegroundProperty); }
                set { SetValue(MenuItemForegroundProperty, value); }
            }
    
            public static readonly DependencyProperty MenuItemForegroundProperty =
                DependencyProperty.Register("MenuItemForeground", typeof(Brush), typeof(Win10Menu), new PropertyMetadata(Brushes.Transparent));
        }
    }

二、创建 Win10Menu.xaml 为 Win10Menu.cs 进行布局 代码如下

![图片][340d03a09c730f98ab8e300980ff7a95.png]

Win10Menu.xaml 思路如下

1、ToggleButton ：控制IsChecked动画如下

IsOpen = False：DoubleAnimation修改controls:Win10Menu的Width为 180。

IsOpen = True ：DoubleAnimation修改controls:Win10Menu的Width为 50。

2、ListBox：ItemsSource="\{TemplateBinding Content\}"展示菜单集合。

需注意如下

ScrollViewer.HorizontalScrollBarVisibility="Disabled"，

不然当Win10Menu的Width 为50时会出现滚动条。

三、创建 Win10MenuItem.cs 继承 ListBoxItem 代码如下。

![图片][340d03a09c730f98ab8e300980ff7a95.png]

Win10MenuItem.cs 思路如下

1、Text 菜单文本内容展示。

2、Icon 菜单图标为ImageSource类型。

3、SelectionIndicatorColor选中的侧边状态颜色。

4、SelectionCommand 选中事件。

using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using System.Windows.Media;
    
    namespace WPFDevelopers.Controls
    {
        public class Win10MenuItem : ListBoxItem
        {
            static Win10MenuItem()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(Win10MenuItem), new FrameworkPropertyMetadata(typeof(Win10MenuItem)));
            }
            public string Text
            {
                get { return (string)GetValue(TextProperty); }
                set { SetValue(TextProperty, value); }
            }
    
            public static readonly DependencyProperty TextProperty =
                DependencyProperty.Register("Text", typeof(string), typeof(Win10MenuItem), new PropertyMetadata(string.Empty));
    
    
            public ImageSource Icon
            {
                get { return (ImageSource)GetValue(IconProperty); }
                set { SetValue(IconProperty, value); }
            }
    
            public static readonly DependencyProperty IconProperty =
                DependencyProperty.Register("Icon", typeof(ImageSource), typeof(Win10MenuItem), new PropertyMetadata(null));
    
            public Brush SelectionIndicatorColor
            {
                get { return (Brush)GetValue(SelectionIndicatorColorProperty); }
                set { SetValue(SelectionIndicatorColorProperty, value); }
            }
    
            public static readonly DependencyProperty SelectionIndicatorColorProperty =
                DependencyProperty.Register("SelectionIndicatorColor", typeof(Brush), typeof(Win10MenuItem), new PropertyMetadata(Brushes.Blue));
    
            public ICommand SelectionCommand
            {
                get { return (ICommand)GetValue(SelectionCommandProperty); }
                set { SetValue(SelectionCommandProperty, value); }
            }
    
            public static readonly DependencyProperty SelectionCommandProperty =
                DependencyProperty.Register("SelectionCommand", typeof(ICommand), typeof(Win10MenuItem), new PropertyMetadata(null));
        }
    }

四、创建 Win10MenuItem.xaml 为 Win10MenuItem.cs 进行布局 代码如下

五、创建Win10MenuExample.xaml代码如下

![图片][340d03a09c730f98ab8e300980ff7a95.png]

Win10MenuExample.xaml实现思路如下

1、Grid布局分为两列设置第零列Width为Auto自适应。

2、第零列为Win10menu。

3、第一列为Frame设置NavigationUIVisibility="Hidden"

六、创建Win10MenuExample.xaml.cs代码如下

![图片][340d03a09c730f98ab8e300980ff7a95.png]

Win10MenuExample.xaml实现思路如下

1、定义List<Uri>赋值集合为菜单需要跳转的页面。

2、构造为myFrame.Navigate(\_uriList\[0\]);第零页。

using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using WPFDevelopers.Samples.Helpers;
    
    namespace WPFDevelopers.Samples.ExampleViews.Win10Menu
    {
        /// <summary>
        /// Win10MenuExample.xaml 的交互逻辑
        /// </summary>
        public partial class Win10MenuExample : UserControl
        {
            private List<Uri> _uriList = new List<Uri>()
            {
                new Uri("ExampleViews/Win10Menu/HomePage.xaml",UriKind.Relative),
                new Uri("ExampleViews/Win10Menu/EdgePage.xaml",UriKind.Relative),
            };
            public Win10MenuExample()
            {
                InitializeComponent();
                myFrame.Navigate(_uriList[0]);
            }
    
            public ICommand HomeCommand => new RelayCommand(obj =>
            {
                myFrame.Navigate(_uriList[0]);
            });
            public ICommand EdgeCommand => new RelayCommand(obj =>
            {
                myFrame.Navigate(_uriList[1]);
            });
            public ICommand CloudCommand => new RelayCommand(obj =>
            {
                MessageBox.Show("点击了云盘");
            });
            public ICommand MailCommand => new RelayCommand(obj =>
            {
                MessageBox.Show("点击了邮件");
            });
            public ICommand VideoCommand => new RelayCommand(obj =>
            {
                MessageBox.Show("点击了视频");
            });
        }
    }

—

效果预览

[视频地址][Link 1]

**源码地址如下**

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

[e4128eb38b8ff214c43415461e23d2c5.png]: /images/20220828/edc86a21e22745acbb14ab1585a49989.png
[340d03a09c730f98ab8e300980ff7a95.png]: /images/20220828/37e1670afb1044309194d8ad8bc25927.png
[Link 1]: http://mpvideo.qpic.cn/0bf26qab4aaaymaleilkjbqvb5gdd32aahqa.f10002.mp4?dis_k=ab02e17c5e20d62c9d835e54877112af&amp;dis_t=1635085392&amp;vid=wxv_2093605040367173633&amp;format_id=10002&amp;support_redirect=0&amp;mmversion=false