.NET CORE(C#) WPF 抽屜式選單
阿新 • • 發佈:2020-04-22
.NET CORE(C#) WPF 抽屜式選單
閱讀導航
- 本文背景
- 程式碼實現
- 本文參考
- 原始碼
1. 本文背景
使用簡單動畫實現抽屜式選單
2. 程式碼實現
使用 .NET CORE 3.1 建立名為 “AnimatedColorfulMenu” 的WPF模板專案,新增1個Nuget庫:MaterialDesignThemes,版本為最新預覽版3.1.0-ci948。
解決方案主要檔案目錄組織結構:
- AnimatedColorfulMenu
- App.xaml
- MainWindow.xaml
2.1 引入樣式
檔案【App.xaml】,在 StartupUri 中設定啟動的檢視【MainWindow.xaml】,並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式檔案:
<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】,程式碼不多,主要看左側選單,啟動時,選單在顯示窗體左側-150位置;點選展開選單,使用簡單的動畫,慢慢呈現在顯示窗體左側,原始碼如下:
<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>
3.本文參考
- 視訊一:C# WPF Material Design UI: Animated Colorful Navigation Drawer,配套原始碼:AnimatedColorfulMenu。
- C# WPF開源控制元件庫《MaterialDesignInXAML》
4.原始碼
效果圖實現程式碼在文中已經全部給出,可直接Copy,按解決方案目錄組織程式碼檔案即可執行。
除非註明,文章均由 Dotnet9 整理髮布,歡迎轉載。
轉載請註明本文地址:https://dotnet9.com/7397.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號,本站會及時推送最新技術文章
時間如流水,只能流去不流回!
點選《【閱讀原文】》,本站還有更多技術類文章等著您哦!!!
此刻順便為我點個《【再看】》可好?