.NET CORE(C#) WPF 抽屜式菜單

微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言， 如果對您有所幫助：歡迎讚賞。

.NET CORE(C#) WPF 抽屜式菜單

閱讀導航

1. 本文背景
2. 代碼實現
3. 本文參考
4. 源碼

1. 本文背景

使用簡單動畫實現抽屜式菜單

2. 代碼實現

使用 .NET CORE 3.1 創建名為 “AnimatedColorfulMenu” 的WPF模板項目，添加1個Nuget庫：MaterialDesignThemes，版本為最新預覽版3.1.0-ci948。

解決方案主要文件目錄組織結構：

• AnimatedColorfulMenuApp.xamlMainWindow.xaml

2.1 引入樣式

文件【App.xaml】，在 StartupUri 中設置啟動的視圖【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式文件：

<code>
<
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
>
/<code>

2.2 演示窗體佈局

文件【MainWindow.xaml】，代碼不多，主要看左側菜單，啟動時，菜單在顯示窗體左側-150位置；點擊展開菜單，使用簡單的動畫，慢慢呈現在顯示窗體左側，源碼如下：

<code> 
<
Window
 
x:Class
=
"AnimatedColorfulMenu.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:materialDesign
=
"http://materialdesigninxaml.net/winfx/xaml/themes"
        
mc:Ignorable
=
"d"
 
Height
=
"600"
 
Width
=
"1080"
 
ResizeMode
=
"NoResize"
 
        
WindowStartupLocation
=
"CenterScreen"
 
WindowStyle
= 
"None"
>

    
<
Window.Resources
>

        
<
Storyboard
 
x:Key
=
"CloseMenu"
>

            
<
DoubleAnimationUsingKeyFrames
 
Storyboard.TargetProperty
=
"(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
 
Storyboard.TargetName
=
"GridMenu"
>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0"
 
Value
=
"150"
/>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0:0:0.5" 
 
Value
=
"0"
/>

            
DoubleAnimationUsingKeyFrames
>

            
<
DoubleAnimationUsingKeyFrames
 
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
 
Storyboard.TargetName
=
"GridBackground"
>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0"
 
Value
=
"1"
/>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0:0:0.5"
 
Value
=
"0"
/>

            
 
DoubleAnimationUsingKeyFrames
>

        
Storyboard
>

        
<
Storyboard
 
x:Key
=
"OpenMenu"
>

            
<
DoubleAnimationUsingKeyFrames
 
Storyboard.TargetProperty
=
"(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
 
Storyboard.TargetName
=
"GridMenu"
>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0"
 
Value
=
"0"
/>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0:0:0.5"
  
Value
=
"150"
/>

            
DoubleAnimationUsingKeyFrames
>

            
<
DoubleAnimationUsingKeyFrames
 
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
 
Storyboard.TargetName
=
"GridBackground"
>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0"
 
Value
=
"0"
/>

                
<
EasingDoubleKeyFrame
 
KeyTime
=
"0:0:0.5"
 
Value
=
"1"
/>

            
DoubleAnimationUsingKeyFrames 
>

        
Storyboard
>

    
Window.Resources
>

    
<
Window.Triggers
>

        
<
EventTrigger
 
RoutedEvent
=
"ButtonBase.Click"
 
SourceName
=
"ButtonClose"
>

            
<
BeginStoryboard
 
x:Name
=
"CloseMenu_BeginStoryboard"
 
Storyboard
=
"{StaticResource CloseMenu}"
/>

        
EventTrigger
>

        
<
EventTrigger
 
RoutedEvent 
=
"ButtonBase.Click"
 
SourceName
=
"ButtonOpen"
>

            
<
BeginStoryboard
 
Storyboard
=
"{StaticResource OpenMenu}"
/>

        
EventTrigger
>

    
Window.Triggers
>

    
<
Grid
>

        
<
Grid
 
x:Name
=
"GridBackground"
 
Background
=
"#55313131"
 
Opacity
=
"0"
/>

        
<
Button 
 
x:Name
=
"ButtonOpen"
 
HorizontalAlignment
=
"Left"
 
VerticalAlignment
=
"Top"
 
Background
=
"{x:Null}"
 
BorderBrush
=
"{x:Null}"
 
Width
=
"30"
 
Height
=
"30"
 
Padding
=
"0"
>

            
<
materialDesign:PackIcon
 
Kind
=
"Menu"
 
Foreground
=
"#FF313131"
/>

        
Button
> 

         
        
<
Grid
 
x:Name
=
"GridMenu"
 
Width
=
"150"
 
HorizontalAlignment
=
"Left"
 
Margin
=
"-150 0 0 0"
 
Background
=
"White"
 
RenderTransformOrigin
=
"0.5,0.5"
>

            
<
Grid.RenderTransform
>

                
<
TransformGroup
>

                    
<
ScaleTransform
/>

                    
<
SkewTransform
/>

                     
<
RotateTransform
/>

                    
<
TranslateTransform
/>

                
TransformGroup
>

            
Grid.RenderTransform
>

            
<
StackPanel
>

                
<
Image
 
Height
=
"140"
 
Source
=
"https://img.dotnet9.com/logo-foot.png"
 
Stretch
=
"Fill"
/>

                
<
ListView
 
Foreground
=
"#FF313131"
 
FontFamily
= 
"Champagne & Limousines"
 
FontSize
=
"18"
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                        
<
StackPanel
 
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"Recycle"
 
Width
=
"20"
 
Height
=
"20"
 
Foreground 
=
"Gray"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"回收"
 
Margin
=
"10"
/>

                        
StackPanel
>

                    
ListViewItem
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                        
<
StackPanel
  
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"HelpCircleOutline"
 
Width
=
"20"
 
Height
=
"20"
 
Foreground
=
"#FFF08033"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"幫助"
 
Margin
=
"10"
/> 

                        
StackPanel
>

                    
ListViewItem
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                        
<
StackPanel
 
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"Lightbulb"
 
Width
=
"20"
 
Height
=
"20" 
 
Foreground
=
"Green"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"發送反饋"
 
Margin
=
"10"
/>

                        
StackPanel
>

                    
ListViewItem
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                        
< 
StackPanel
 
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"Heart"
 
Width
=
"20"
 
Height
=
"20"
 
Foreground
=
"#FFD41515"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"推薦"
 
Margin
= 
"10"
/>

                        
StackPanel
>

                    
ListViewItem
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                        
<
StackPanel
 
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"StarCircle"
 
Width
=
"20"
 
Height 
=
"20"
 
Foreground
=
"#FFE6A701"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"溢價認購"
 
Margin
=
"10"
/>

                        
StackPanel
>

                    
ListViewItem
>

                    
<
ListViewItem
 
Height
=
"45"
 
Padding
=
"0"
>

                         
<
StackPanel
 
Orientation
=
"Horizontal"
 
Margin
=
"10 0"
>

                            
<
materialDesign:PackIcon
 
Kind
=
"Settings"
 
Width
=
"20"
 
Height
=
"20"
 
Foreground
=
"#FF0069C1"
 
Margin
=
"5"
 
VerticalAlignment
=
"Center"
/>

                            
<
TextBlock
 
Text
=
"設置"
  
Margin
=
"10"
/>

                        
StackPanel
>

                    
ListViewItem
>

                
ListView
>

            
StackPanel
>

            
<
Button
 
x:Name
=
"ButtonClose"
 
HorizontalAlignment
=
"Right"
 
VerticalAlignment
=
"Top"
 
Background
=
"{x:Null}"
 
Foreground
=
"#CCC"
 
BorderBrush
=
"{x:Null}"
 
Width 
=
"30"
 
Height
=
"30"
 
Padding
=
"0"
>

                
<
materialDesign:PackIcon
 
Kind
=
"Close"
/>

            
Button
>

        
Grid
>

    
Grid
>

Window
>
/<code>

3.本文參考

1. 視頻一：C# WPF Material Design UI: Animated Colorful Navigation Drawer，配套源碼：AnimatedColorfulMenu。
2. C# WPF開源控件庫《MaterialDesignInXAML》

4.源碼

效果圖實現代碼在文中已經全部給出，可直接Copy，按解決方案目錄組織代碼文件即可運行。

除非註明，文章均由 Dotnet9 整理發佈，歡迎轉載。

轉載請註明本文地址：
https://dotnet9.com/7397.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章

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

點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！

此刻順便為我點個《【再看】》可好？