这篇文章给大家介绍C#中怎么利用 WPF实现一个抽屉效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
代码实现
站长使用.Net Core 3.1创建的WPF工程,创建PopUpAndNav解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors。
添加Material两个库
工程比较简单,主要就是演示窗口MainWindow:
解决方案结构
代码不多,我就全部贴上代码吧。
添加MaterialDesignInXaml样式:App.xaml
<Application x:Class="PopUpAndNav.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:PopUpAndNav" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources></Application>
演示窗口MainWindow.xaml代码,使用简单的自定义窗口,看效果图,有右上角的标题栏菜单及左上角的抽屉菜单:
<Window x:Class="PopUpAndNav.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:PopUpAndNav" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" mc:Ignorable="d" Foreground="White" Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None"> <Window.Resources> <Storyboard x:Key="MenuOpen"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu"> <EasingDoubleKeyFrame KeyTime="0" Value="60"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="MenuClose"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu"> <EasingDoubleKeyFrame KeyTime="0" Value="200"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu"> <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/> </EventTrigger> <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu"> <BeginStoryboard Storyboard="{StaticResource MenuClose}"/> </EventTrigger> </Window.Triggers> <Grid Background="LightGray"> <Grid x:Name="GridTitle" Height="60" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown"> <TextBlock Text="C# WPF 抽屉效果" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/> <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right"> <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="18"/> <materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False"> <StackPanel Width="150"> <Button Content="账号"/> <Button Content="设置"/> <Button Content="帮助"/> <Separator/> <Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/> </StackPanel> </materialDesign:PopupBox> </StackPanel> </Grid> <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861"> <StackPanel> <Grid Height="150" Background="White"> <Button x:Name="ButtonCloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click"> <materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/> </Button> <Button x:Name="ButtonOpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click"> <materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/> </Button> </Grid> <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD"> <ListViewItem Height="60"> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/> <TextBlock Text="首页" VerticalAlignment="Center" Margin="20 10"/> </StackPanel> </ListViewItem> <ListViewItem Height="60"> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/> <TextBlock Text="创建" VerticalAlignment="Center" Margin="20 10"/> </StackPanel> </ListViewItem> <ListViewItem Height="60"> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/> <TextBlock Text="售票" VerticalAlignment="Center" Margin="20 10"/> </StackPanel> </ListViewItem> <ListViewItem Height="60"> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/> <TextBlock Text="信息" VerticalAlignment="Center" Margin="20 10"/> </StackPanel> </ListViewItem> <ListViewItem Height="60"> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="GithubBox" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/> <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/> </StackPanel> </ListViewItem> </ListView> </StackPanel> </Grid> </Grid></Window>
后台MainWindow.xaml.cs,主要是处理窗体关闭事件及抽屉菜单的展开与折叠:
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace PopUpAndNav{ /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e) { Application.Current.Shutdown(); } private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e) { ButtonOpenMenu.Visibility = Visibility.Collapsed; ButtonCloseMenu.Visibility = Visibility.Visible; } private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e) { ButtonOpenMenu.Visibility = Visibility.Visible; ButtonCloseMenu.Visibility = Visibility.Collapsed; } private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e) { DragMove(); } }}
关于C#中怎么利用 WPF实现一个抽屉效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/dotnet9/blog/4442834