C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。

阅读导航:

  • 一、先看效果
  • 二、本文背景
  • 三、代码实现
  • 四、文章参考
  • 五、代码下载

一、先看效果

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

二、本文背景

有网友给站长Dotnet9留言:“WPF中能否实现UWP中SplitView效果,即抽屉效果吗?” Dotnet9记得国外开源C# WPF控件库MaterialDesignInXaml中有这种效果,可以查看本站写的推荐文章:MaterialDesignInXaml控件介绍,站长也是个喜欢码砖的人,对代码是很感兴趣的,遂Google了一个YouTube视频敲出本文实现的代码,希望对他和您有用。

三、代码实现

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

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)
添加Material两个库

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

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)
解决方案结构

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

添加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();
        }
    }
}

四、文章参考

上面的代码是Dotnet9看 Disign com WPF 大神视频手敲的,下面是大神youtube地址及本实例学习视频。

参考:
Design com WPFhttps://www.youtube.com/watch?v=YQ1EJJZBHyE

五、代码下载

文章中代码已经全部贴出,其实不用下载浪费CSDN积分,但还是贴出CSDN下载地址吧: https://download.csdn.net/download/HenryMoore/12040143

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6205.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

登录后才能评论

评论列表(2条)

  • 小飞机MLA
    小飞机MLA 2019年12月18日 21:05

    哈哈,我就是这个提出问题的人,站长太用心了,谢谢谢谢!我要学习下~~~~~