C# WPF抽屜效果實現

時間如流水，只能流去不流回！

點贊再看，養成習慣，這是您給我創作的動力！

本文 Dotnet9 https://dotnet9.com 已收錄，站長樂於分享dotnet相關技術，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己會的。

一、先看效果：

效果展示

二、本文背景

有網友給站長Dotnet9留言：“WPF中能否實現UWP中SplitView效果，即抽屜效果嗎？” Dotnet9記得國外開源C# WPF控件庫MaterialDesignInXaml中有這種效果，可以查看本站寫的推薦文章：MaterialDesignInXaml控件介紹，站長也是個喜歡碼磚的人，對代碼是很感興趣的，遂Google了一個YouTube視頻敲出本文實現的代碼，希望對他和您有用。

三、代碼實現

站長使用.Net Core 3.1創建的WPF工程，創建PopUpAndNav解決方案後，需要添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors。

添加Material兩個庫

工程比較簡單，主要就是演示窗口MainWindow：

解決方案結構

代碼不多，我就全部貼上代碼吧。

添加MaterialDesignInXaml樣式：App.xaml

<application>             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>
                <resourcedictionary>
                <resourcedictionary>
                <resourcedictionary>
            /<resourcedictionary.mergeddictionaries>
        /<resourcedictionary>
    /<application.resources>
/<application>

演示窗口MainWindow.xaml代碼，使用簡單的自定義窗口，看效果圖，有右上角的標題欄菜單及左上角的抽屜菜單：

<window>        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>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
        <storyboard>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
    /<window.resources>

    <window.triggers>
        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger> 

        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger>
    /<window.triggers>
    
    <grid>
        <grid>
            <textblock>
            <stackpanel>
                <textblock>
                <popupbox>
                    <stackpanel>
                        <button>
                        <button>
                        <button>
                        <separator>
                        <button>
                    /<stackpanel>
                /<popupbox>
            /<stackpanel>
        /<grid>
        <grid>
            <stackpanel>
                <grid>
                    <button>
                        <packicon>
                    /<button>
                    <button>
                        <packicon>
                    /<button>
                /<grid>
                <listview>
                    <listviewitem>
                        <stackpanel>
                            <packicon>
                            <textblock>
                        /<stackpanel>
                    /<listviewitem>
                    <listviewitem>
                        <stackpanel>
                            <packicon>
                            <textblock>
                        /<stackpanel>
                    /<listviewitem>
                    <listviewitem>
                        <stackpanel>
                            <packicon>
                            <textblock>
                        /<stackpanel>
                    /<listviewitem> 

                    <listviewitem>
                        <stackpanel>
                            <packicon>
                            <textblock>
                        /<stackpanel>
                    /<listviewitem>
                    <listviewitem>
                        <stackpanel>
                            <packicon>
                            <textblock>
                        /<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 WPF ： https://www.youtube.com/watch?v=YQ1EJJZBHyE

閱讀更多 沙漠盡頭的狼 的文章

關鍵字: XAML Google 點贊