WPF开发者QQ群： 340500857  | 微信群 -> 进入公众号主页 加入组织

前言

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

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

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

　　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 Content
{
get { return (List)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 进行布局 代码如下

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 代码如下。

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 进行布局 代码如下

<!-- Fill Brushes -->

<SolidColorBrush x:Key="NormalBrush" Color="Transparent" />  
<SolidColorBrush x:Key="DarkBrush" Color="#ddd" />  
<SolidColorBrush x:Key="PressedBrush" Color="#80FFFFFF" />  
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="Transparent" />  
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="Transparent" />

<!-- Border Brushes -->

<SolidColorBrush x:Key="NormalBorderBrush" Color="Transparent" />  
<SolidColorBrush x:Key="PressedBorderBrush" Color="Transparent" />  
<SolidColorBrush x:Key="DefaultedBorderBrush" Color="Transparent" />  
<SolidColorBrush x:Key="DisabledBorderBrush" Color="Transparent" />

五、创建Win10MenuExample.xaml代码如下

Win10MenuExample.xaml实现思路如下

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

2、第零列为Win10menu。

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

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

Win10MenuExample.xaml实现思路如下

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

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
{
///

    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("点击了视频");  
    });  
}