微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言； 如果您觉得Dotnet9对您有帮助，欢迎赞赏
内容目录
实现效果
业务场景
编码实现
本文参考
源码下载
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
网友评论