C# WPF抽屜效果實現(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

来源:https://www.cnblogs.com/Dotnet9-com/archive/2019/12/18/12061583.html
-Advertisement-
Play Games

時間如流水,只能流去不流回! 點贊再看,養成習慣,這是您給我創作的動力! 本文 Dotnet9 https://dotnet9.com 已收錄,站長樂於分享dotnet相關技術,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相關的Qt Quick和Qt Widgets等,只分 ...


時間如流水,只能流去不流回!

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

本文 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

 1 <Application x:Class="PopUpAndNav.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:PopUpAndNav"
 5              StartupUri="MainWindow.xaml">
 6     <Application.Resources>
 7         <ResourceDictionary>
 8             <ResourceDictionary.MergedDictionaries>
 9                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
10                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
11                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
12                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>
13             </ResourceDictionary.MergedDictionaries>
14         </ResourceDictionary>
15     </Application.Resources>
16 </Application>
App.xaml

 

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

 1 <Window x:Class="PopUpAndNav.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:local="clr-namespace:PopUpAndNav"
 7         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
 8         mc:Ignorable="d" Foreground="White"
 9         Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
10     <Window.Resources>
11         <Storyboard x:Key="MenuOpen">
12             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
13                 <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
14                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
15             </DoubleAnimationUsingKeyFrames>
16         </Storyboard>
17         <Storyboard x:Key="MenuClose">
18             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
19                 <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
20                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
21             </DoubleAnimationUsingKeyFrames>
22         </Storyboard>
23     </Window.Resources>
24 
25     <Window.Triggers>
26         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
27             <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
28         </EventTrigger>
29         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
30             <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
31         </EventTrigger>
32     </Window.Triggers>
33     
34     <Grid Background="LightGray">
35         <Grid x:Name="GridTitle" Height="60" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown">
36             <TextBlock Text="C# WPF 抽屜效果" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
37             <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
38                 <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="18"/>
39                 <materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
40                     <StackPanel Width="150">
41                         <Button Content="賬號"/>
42                         <Button Content="設置"/>
43                         <Button Content="幫助"/>
44                         <Separator/>
45                         <Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/>
46                     </StackPanel>
47                 </materialDesign:PopupBox>
48             </StackPanel>
49         </Grid>
50         <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861">
51             <StackPanel>
52                 <Grid Height="150" Background="White">
53                     <Button x:Name="ButtonCloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
54                         <materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/>
55                     </Button>
56                     <Button x:Name="ButtonOpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
57                         <materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/>
58                     </Button>
59                 </Grid>
60                 <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD">
61                     <ListViewItem Height="60">
62                         <StackPanel Orientation="Horizontal">
63                             <materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
64                             <TextBlock Text="首頁" VerticalAlignment="Center" Margin="20 10"/>
65                         </StackPanel>
66                     </ListViewItem>
67                     <ListViewItem Height="60">
68                         <StackPanel Orientation="Horizontal">
69                             <materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
70                             <TextBlock Text="創建" VerticalAlignment="Center" Margin="20 10"/>
71                         </StackPanel>
72                     </ListViewItem>
73                     <ListViewItem Height="60">
74                         <StackPanel Orientation="Horizontal">
75                             <materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
76                             <TextBlock Text="售票" VerticalAlignment="Center" Margin="20 10"/>
77                         </StackPanel>
78                     </ListViewItem>
79                     <ListViewItem Height="60">
80                         <StackPanel Orientation="Horizontal">
81                             <materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
82                             <TextBlock Text="信息" VerticalAlignment="Center" Margin="20 10"/>
83                         </StackPanel>
84                     </ListViewItem>
85                     <ListViewItem Height="60">
86                         <StackPanel Orientation="Horizontal">
87                             <materialDesign:PackIcon Kind="GithubBox" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
88                             <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/>
89                         </StackPanel>
90                     </ListViewItem>
91                 </ListView>
92             </StackPanel>
93         </Grid>
94     </Grid>
95 </Window>
MainWindow.xaml

 

後臺MainWindow.xaml.cs,主要是處理窗體關閉事件及抽屜菜單的展開與摺疊:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15 
16 namespace PopUpAndNav
17 {
18     /// <summary>
19     /// Interaction logic for MainWindow.xaml
20     /// </summary>
21     public partial class MainWindow : Window
22     {
23         public MainWindow()
24         {
25             InitializeComponent();
26         }
27 
28         private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e)
29         {
30             Application.Current.Shutdown();
31         }
32 
33         private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
34         {
35             ButtonOpenMenu.Visibility = Visibility.Collapsed;
36             ButtonCloseMenu.Visibility = Visibility.Visible;
37         }
38 
39         private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
40         {
41             ButtonOpenMenu.Visibility = Visibility.Visible;
42             ButtonCloseMenu.Visibility = Visibility.Collapsed;
43         }
44         
45         private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e)
46         {
47             DragMove();
48         }
49     }
50 }
MainWindow.xaml.cs
 

四、文章參考

上面的代碼是Dotnet9看 Disign com WPF 大神視頻手敲的,下麵是大神youtube地址及本實例學習視頻。

參考:
Design com WPF : https://www.youtube.com/watch?v=YQ1EJJZBHyE

 

除非註明,文章均由 Dotnet9 整理髮布,歡迎轉載。

轉載請註明本文地址:https://dotnet9.com/2019/12/it-technology/csharp/wpf/csharp-wpf-material-design-ui-navigation-drawer-popup-menu.html

如有所收穫,請大力轉發(能點贊及推薦那是極好的);如覺小編寫文不易,歡迎給Dotnet9站點打賞,小編謝謝了;謝謝大家對dotnet技術的關註和支持 。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這次來學習一下SpringMVC的源碼. 對於常見的項目架構模式,比如大名鼎鼎的SSM(SpringMVC,Spring,Mybatis)框架. SpringMVC ->web層(Controller層) Spring ->service層 mybatis ->dao層 從SpringMVC層面上講 ...
  • 語法 傳值與傳引用 Python參數傳遞採用的是“傳對象引用”的方式。這種方式相當於傳值和傳引用的一種綜合。 如果函數收到的是一個可變對象(比如字典或者列表)的引用,就能修改對象的原始值--相當於通過“傳引用”來傳遞對象。 如果函數收到的是一個不可變對象(比如數字、字元或者元組)的引用,就不能直接修 ...
  • 爬蟲與反爬 爬蟲:自動獲取網站數據的程式,關鍵是批量的獲取。 反爬蟲:使用技術手段防止爬蟲程式的方法 誤傷:反爬技術將普通用戶識別為爬蟲,從而限制其訪問,如果誤傷過高,反爬效果再好也不能使用(例如封ip,只會限制ip在某段時間內不能訪問) 成本:反爬蟲需要的人力和機器成本 攔截:成功攔截爬蟲,一般攔 ...
  • 一、操作redis redis是一個key-value存儲系統,value的類型包括string(字元串),list(鏈表),set(集合),zset(有序集合),hash(哈希類型)。為了保證效率,數據都是緩衝在記憶體中,在處理大規模數據讀寫的場景下運用比較多。 備註:預設redis有16個資料庫, ...
  • 一、前提 多台客戶端 / 伺服器 之間傳遞實體類的序列化對象 需要實現四個類,即伺服器類,線程類,客戶端類及實體類 註:實體類需實現介面:implements Serializable 二、伺服器類 伺服器類,需要實現兩個類:ServerSocket 和 Socket 。且 ServerSocket ...
  • 詳細使用教程 1、沒安裝Python的小伙伴需要先安裝一下 2、win+r輸入cmd打開命令行,輸入:pip install baidu-aip,如下安裝百度AI的模塊。 3、新建文本文檔,copy如下代碼,然後另存為py尾碼的文檔即可,小編的命名為:test.py。 from aip import ...
  • [toc] kratos微服務框架學習筆記一(kratos demo) 今年大部分時間飄過去了,沒怎麼更博和github,現在開發任務也差不多完成了,會比較輕鬆,考慮到今後發展,打算看看微服務框架。 常見微服務框架主要有這麼幾個 , a microservice toolkit from The N ...
  • 項目需要引用NPOI的Nuget包:DotNetCore.NPOI-v1.2.2 本篇文章是對WebAPI項目使用NPOI操作Excel時的幫助類:ExcelHelper的改進優化做下記錄: 備註:下麵的幫助類代碼使用的文件格式為:xlsx文件,xlsx相對xls的優缺點代碼里有註釋,推薦使用xls ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...