温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

C#中怎么利用 WPF实现一个抽屉效果

发布时间:2021-06-24 17:13:15 阅读:570 作者:Leah 栏目:大数据
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家介绍C#中怎么利用 WPF实现一个抽屉效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

代码实现

站长使用.Net Core 3.1创建的WPF工程,创建PopUpAndNav解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors。

C#中怎么利用 WPF实现一个抽屉效果添加Material两个库

工程比较简单,主要就是演示窗口MainWindow:

C#中怎么利用 WPF实现一个抽屉效果

解决方案结构

代码不多,我就全部贴上代码吧。

添加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元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://my.oschina.net/dotnet9/blog/4442834

AI

开发者交流群×