WPF自定义控件_抽屉

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

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

展开抽屉前：

 

 

 

展开抽屉后：

 

 

 

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

 

1.抽屉控件使用代码

xaml代码

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

cs代码

 1 using System.ComponentModel;
 2 using System.Runtime.CompilerServices;
 3 using System.Windows;
 4 
 5 namespace Drawer
 6 {
 7     /// <summary>
 8     /// Interaction logic for MainWindow.xaml
 9     /// </summary>
10     public partial class MainWindow : Window, INotifyPropertyChanged
11     {
12         public event PropertyChangedEventHandler PropertyChanged;
13 
14         private bool isDrawerOpen;
15         /// <summary>
16         /// 是否打开抽屉
17         /// </summary>
18         public bool IsDrawerOpen
19         {
20             get { return isDrawerOpen; }
21             set { isDrawerOpen = value; Notify(); }
22         }
23 
24         private void Notify([CallerMemberName] string obj = "")
25         {
26             if (PropertyChanged != null)
27             {
28                 this.PropertyChanged(this, new PropertyChangedEventArgs(obj));
29             }
30         }
31 
32         public MainWindow()
33         {
34             InitializeComponent();
35             DataContext = this;
36         }
37 
38         private void Button_Click(object sender, RoutedEventArgs e)
39         {
40             IsDrawerOpen = true;
41         }
42     }
43 }

2.抽屉控件代码

cs

xaml

 

3.引入抽屉控件

 1 <Application x:Class="Drawer.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:Drawer"
 5              StartupUri="MainWindow.xaml">
 6     <Application.Resources>
 7         <ResourceDictionary>
 8             <ResourceDictionary.MergedDictionaries>
 9                 <ResourceDictionary Source="pack://application:,,,/Drawer;component/UserControls/NomalDrawer/NomalDrawer.xaml" />
10             </ResourceDictionary.MergedDictionaries>
11         </ResourceDictionary>
12     </Application.Resources>
13 </Application>

 

 

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

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

抽屉源码地址：Drawer: WPF抽屉/自定义控件 (gitee.com)