WPF自定义控件_抽屉效果

　　刚好有需求要用WPF实现抽屉效果功能，查找网上的效果都不太符合自己的需求，于是决定自己写一个。

　　废话不多说，先看界面效果图：

展开抽屉前：

 

 

 

展开抽屉后：

 

 

 

具体功能：可以通过依赖属性设置抽屉的开关，抽屉宽度百分比，关闭抽屉时是否询问等属性。

 

1.抽屉控件使用代码

xaml代码

<Window x:Class="Drawer.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:ucs="clr-namespace:Drawer.UserControls"
        xmlns:local="clr-namespace:Drawer"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <ucs:NomalDrawer IsDrawerOpen="{Binding IsDrawerOpen,Mode=TwoWay}" DrawerWidthPercent="70">
        <ucs:NomalDrawer.Content>
            <Grid>
                <Button Content="打开抽屉" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click"/>
            </Grid>
        </ucs:NomalDrawer.Content>
        <ucs:NomalDrawer.Drawer>
            <TextBlock Text="这是抽屉里面的内容" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </ucs:NomalDrawer.Drawer>
    </ucs:NomalDrawer>
</Window>

cs代码

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace Drawer
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool isDrawerOpen;
        /// <summary>
        /// 是否打开抽屉
        /// </summary>
        public bool IsDrawerOpen
        {
            get { return isDrawerOpen; }
            set { isDrawerOpen = value; Notify(); }
        }

        private void Notify([CallerMemberName] string obj = "")
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(obj));
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            IsDrawerOpen = true;
        }
    }
}

2.抽屉控件代码

cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Drawer.UserControls
{
    /// <summary>
    /// 普通抽屉
    /// </summary>
    public class NomalDrawer : Control
    {
        /*
            说明：两个容器
            一个抽屉容器，一个正常容器
            抽屉容器弹出显示需要以抽屉形式显示的内容
            正常容器显示未显示抽屉时的内容
            
            通过修改依赖属性的信息，以达到控制抽屉展开和闭合的效果
         */

        static NomalDrawer()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(NomalDrawer), new FrameworkPropertyMetadata(typeof(NomalDrawer)));
        }

        #region 内容

        /// <summary>
        /// 内容
        /// </summary>
        public object Content
        {
            get { return GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }
        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
            "Content", typeof(object), typeof(NomalDrawer), new PropertyMetadata(default(object)));

        #endregion

        #region 抽屉

        /// <summary>
        /// 抽屉
        /// </summary>
        public object Drawer
        {
            get { return GetValue(DrawerProperty); }
            set { SetValue(DrawerProperty, value); }
        }
        public static readonly DependencyProperty DrawerProperty = DependencyProperty.Register(
            "Drawer", typeof(object), typeof(NomalDrawer), new PropertyMetadata(default(object)));

        #endregion

        #region 抽屉方法（左右）

        public static readonly DependencyProperty DirectionProperty = DependencyProperty.Register(
            "Direction", typeof(HorizontalAlignment), typeof(NomalDrawer), new PropertyMetadata(HorizontalAlignment.Right));

        public HorizontalAlignment Direction
        {
            get { return (HorizontalAlignment)GetValue(DirectionProperty); }
            set { SetValue(DirectionProperty, value); }
        }

        #endregion

        #region 抽屉宽度

        public double DrawerWidth { get; set; }

        public double DrawerWidthPercent { get; set; }

        public double DrawerWidthBind
        {
            get { return (double)GetValue(DrawerWidthBindProperty); }
            set { SetValue(DrawerWidthBindProperty, value); }
        }

        public static readonly DependencyProperty DrawerWidthBindProperty = DependencyProperty.Register(
            "DrawerWidthBind", typeof(double), typeof(NomalDrawer), new PropertyMetadata(default(double)));

        #endregion

        #region 抽屉是否展开

        /// <summary>
        /// 抽屉是否展开
        /// </summary>
        public bool IsDrawerOpen
        {
            get { return (bool)GetValue(IsDrawerOpenProperty); }
            set { SetValue(IsDrawerOpenProperty, value); }
        }

        public static readonly DependencyProperty IsDrawerOpenProperty = DependencyProperty.Register(
            "IsDrawerOpen", typeof(bool), typeof(NomalDrawer), new PropertyMetadata(false, IsDrawerOpenCallBack));

        private static void IsDrawerOpenCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var nomal = d as NomalDrawer;
            if (!nomal.IsDrawerOpen)
            {
                VisualStateManager.GoToState(nomal, "Normal", false);
            }
            else
            {
                if (nomal.DrawerWidthPercent != default)
                {
                    nomal.DrawerWidthBind = nomal.ActualWidth * nomal.DrawerWidthPercent / 100;
                }
                else
                {
                    nomal.DrawerWidthBind = nomal.DrawerWidth;
                }
                VisualStateManager.GoToState(nomal, "Open", false);
            }
        }

        #endregion

        #region 关闭抽屉是否提示

        /// <summary>
        /// 是否显示关闭提示
        /// </summary>
        public bool ShowCloseTip
        {
            get { return (bool)GetValue(ShowCloseTipProperty); }
            set { SetValue(ShowCloseTipProperty, value); }
        }

        public static readonly DependencyProperty ShowCloseTipProperty = DependencyProperty.Register(
            "ShowCloseTip", typeof(bool), typeof(NomalDrawer), new PropertyMetadata(default(bool)));

        #endregion

        #region 关闭提示文本

        /// <summary>
        /// 关闭提示文本
        /// </summary>
        public string CloseTipText
        {
            get { return (string)GetValue(CloseTipTextProperty); }
            set { SetValue(CloseTipTextProperty, value); }
        }

        public static readonly DependencyProperty CloseTipTextProperty = DependencyProperty.Register(
            "CloseTipText", typeof(string), typeof(NomalDrawer), new PropertyMetadata("是否关闭!"));

        #endregion

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            var darkSurface = GetTemplateChild("PART_DarkSurface") as Border;

            if (darkSurface != null)
            {
                darkSurface.MouseDown += DarkSurface_MouseDown;
            }
        }

        private void DarkSurface_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (ShowCloseTip)
            {
                MessageBoxResult dr = MessageBox.Show(CloseTipText, "提示", MessageBoxButton.OKCancel, MessageBoxImage.Question);
                if (dr == MessageBoxResult.OK)
                {
                    IsDrawerOpen = false;
                }
            }
            else
                IsDrawerOpen = false;
        }
    }
}

xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ucs="clr-namespace:Drawer.UserControls">

    <Style TargetType="{x:Type ucs:NomalDrawer}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ucs:NomalDrawer}">
                    <Grid>
                        <!--  内容  -->
                        <Border Panel.ZIndex="0">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </Border>
                        <!--  遮罩  -->
                        <Border
                            x:Name="PART_DarkSurface"
                            Panel.ZIndex="1"
                            Background="Transparent"
                            IsHitTestVisible="False" />
                        <!--  弹出内容  -->
                        <Border
                            x:Name="PART_Drawer"
                            Width="{TemplateBinding DrawerWidthBind}"
                            HorizontalAlignment="{TemplateBinding Direction}"
                            Panel.ZIndex="2"
                            Background="White">
                            <ContentPresenter Content="{TemplateBinding Drawer}" />
                        </Border>


                        <!--  状态改变  -->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ViewStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="PART_Drawer"
                                            Storyboard.TargetProperty="Width"
                                            From="{TemplateBinding DrawerWidthBind}"
                                            To="0"
                                            Duration="0:0:0.2" />
                                        <ColorAnimation
                                            Storyboard.TargetName="PART_DarkSurface"
                                            Storyboard.TargetProperty="Background.Color"
                                            To="Transparent"
                                            Duration="0:0:0.1" />
                                        <BooleanAnimationUsingKeyFrames
                                            BeginTime="0:0:0.1"
                                            Storyboard.TargetName="PART_DarkSurface"
                                            Storyboard.TargetProperty="IsHitTestVisible">
                                            <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
                                        </BooleanAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Open">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="PART_Drawer"
                                            Storyboard.TargetProperty="Width"
                                            From="0"
                                            To="{TemplateBinding DrawerWidthBind}"
                                            Duration="0:0:0.1" />
                                        <ColorAnimation
                                            Storyboard.TargetName="PART_DarkSurface"
                                            Storyboard.TargetProperty="Background.Color"
                                            To="#7F222222"
                                            Duration="0:0:0.1" />
                                        <BooleanAnimationUsingKeyFrames
                                            BeginTime="0:0:0.1"
                                            Storyboard.TargetName="PART_DarkSurface"
                                            Storyboard.TargetProperty="IsHitTestVisible">
                                            <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
                                        </BooleanAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

3.引入抽屉控件

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

 

 

说明：此控件是参考其他抽屉功能修改而成，有需求的可以自己再添加一些属性，实现自己需要的功能。

参考代码地址：GitHub - Redouane64/WPFNavigationDrawer: Navigation drawer control for WPF.

抽屉源码地址：