微信公眾號：Dotnet9，網站：Dotnet9，問題或建議，請網站留言；
如果您覺得Dotnet9對您有幫助，歡迎贊賞
C# WPF 簡單自定義菜單切換動畫
內容目錄
- 實現效果
- 業務場景
- 編碼實現
- 本文參考
- 源碼下載
1.實現效果
自定義菜單切換動畫
2.業務場景
菜單切換動畫
3.編碼實現
3.1 添加Nuget庫
使用 .Net Core 3.1 創建名為“CustomMenu”的WPF解決方案，添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors。
MaterialDesign控件庫
3.2 工程結構
只修改了App.xaml（添加MD控件樣式）和MainWindow.xaml（主窗口實現效果）。
3.3 App.xaml引入MD控件樣式
<Application x:Class="CustomMenu.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomMenu"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--PRIMARY-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#349FDA"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#0288d1"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#015f92"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
<!--ACCENT-->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#FF50F350"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
</ResourceDictionary>
</Application.Resources>
</Application>
3.4 主窗體 MainWindow.xaml
添加菜單、設置菜單項切換動畫等：
<Window x:Class="CustomMenu.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:local="clr-namespace:CustomMenu"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1080" Background="#FF292929" ResizeMode="NoResize" WindowStyle="None"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<Storyboard x:Key="Move0">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Move1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="40">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Move2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="80">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item0">
<BeginStoryboard x:Name="Move0_BeginStoryboard" Storyboard="{StaticResource Move0}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item1">
<BeginStoryboard x:Name="Move1_BeginStoryboard" Storyboard="{StaticResource Move1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item2">
<BeginStoryboard x:Name="Move2_BeginStoryboard" Storyboard="{StaticResource Move2}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="{StaticResource SecondaryAccentBrush}" BorderThickness="0 0 0 1">
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
<Button Style="{StaticResource MaterialDesignFlatButton}">
<materialDesign:PackIcon Kind="Minus"/>
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}">
<materialDesign:PackIcon Kind="Close"/>
</Button>
</StackPanel>
</Border>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ListView Width="200" HorizontalAlignment="Left">
<ListViewItem x:Name="item0" Content="首頁" Height="40"/>
<ListViewItem x:Name="item1" Content="瀏覽" Height="40"/>
<ListViewItem x:Name="item2" Content="視頻" Height="40"/>
</ListView>
<Grid Grid.ColumnSpan="2" Width="5" Margin="195 0" HorizontalAlignment="Left">
<Rectangle Fill="{StaticResource SecondaryAccentBrush}" Width="2" HorizontalAlignment="Right"/>
<Ellipse x:Name="ellipse" Width="10" Height="10" VerticalAlignment="Top" Fill="{StaticResource SecondaryAccentBrush}" Margin="0 15"
RenderTransformOrigin="0.5 0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Grid>
</Grid>
</Window>
4.本文參考
Design com WPF 大神的學習視頻：CustomMenu
開源控件庫：MaterialDesignInXamlToolkit
本站對MD開源控件庫的介紹：控件介紹
5.代碼下載
Github源碼下載：下載
除非注明，文章均由 Dotnet9 整理發布，歡迎轉載。
轉載請注明本文地址：https://dotnet9.com/6820.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章
