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

閱讀導(dǎo)航

本文背景

代碼實(shí)現(xiàn)

本文參考

源碼

1. 本文背景

使用簡(jiǎn)單動(dòng)畫實(shí)現(xiàn)抽屜式菜單

2. 代碼實(shí)現(xiàn)

使用 .NET CORE 3.1 創(chuàng)建名為 “AnimatedColorfulMenu” 的WPF模板項(xiàng)目，添加1個(gè)Nuget庫(kù)：MaterialDesignThemes，版本為最新預(yù)覽版3.1.0-ci948。

解決方案主要文件目錄組織結(jié)構(gòu)：

• AnimatedColorfulMenu

• • App.xaml

  • MainWindow.xaml

2.1 引入樣式

文件【App.xaml】，在 StartupUri 中設(shè)置啟動(dòng)的視圖【MainWindow.xaml】，并在【Application.Resources】節(jié)點(diǎn)增加 MaterialDesignThemes庫(kù)的樣式文件：

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

2.2 演示窗體布局

文件【MainWindow.xaml】，代碼不多，主要看左側(cè)菜單，啟動(dòng)時(shí)，菜單在顯示窗體左側(cè)-150位置；點(diǎn)擊展開(kāi)菜單，使用簡(jiǎn)單的動(dòng)畫，慢慢呈現(xiàn)在顯示窗體左側(cè)，源碼如下：

<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><!--左側(cè)抽屜菜單，默認(rèn)在顯示窗體之外，點(diǎn)擊菜單圖標(biāo)再通過(guò)簡(jiǎn)單的動(dòng)畫呈現(xiàn)出來(lái)--><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 &amp; 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="發(fā)送反饋" 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="溢價(jià)認(rèn)購(gòu)" 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="設(shè)置" 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>

3.本文參考

視頻一：C# WPF Material Design UI: Animated Colorful Navigation Drawer，配套源碼：AnimatedColorfulMenu。

C# WPF開(kāi)源控件庫(kù)《MaterialDesignInXAML》

4.源碼

效果圖實(shí)現(xiàn)代碼在文中已經(jīng)全部給出，可直接Copy，按解決方案目錄組織代碼文件即可運(yùn)行。

總結(jié)

以上是生活随笔為你收集整理的.NET CORE(C#) WPF 抽屉式菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。