C# WPF 簡單自定義菜單切換動畫

微信公眾號：Dotnet9，網(wǎng)站：Dotnet9，問題或建議，請網(wǎng)站留言粹庞；如果您覺得Dotnet9對您有幫助，歡迎贊賞

內(nèi)容目錄

實現(xiàn)效果

業(yè)務(wù)場景

編碼實現(xiàn)

本文參考

源碼下載

1.實現(xiàn)效果

自定義菜單切換動畫

2.業(yè)務(wù)場景

菜單切換動畫

3.編碼實現(xiàn)

3.1 添加Nuget庫

使用 .Net Core 3.1 創(chuàng)建名為“CustomMenu”的WPF解決方案洽损，添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors。

MaterialDesign控件庫?

3.2 工程結(jié)構(gòu)

只修改了App.xaml（添加MD控件樣式）和MainWindow.xaml（主窗口實現(xiàn)效果）革半。

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>

? ? ? ? ? ?

? ? ? ? ? ? <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"/>

? ? ? ? ? ?

? ? ? ? ? ? <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#FF50F350"/>

? ? ? ? ? ? <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>

? ? ? ? </ResourceDictionary>

? ? </Application.Resources>

</Application>

3.4 主窗體 MainWindow.xaml

添加菜單碑定、設(shè)置菜單項切換動畫等：

<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大神的學(xué)習(xí)視頻：CustomMenu

開源控件庫：MaterialDesignInXamlToolkit

本站對MD開源控件庫的介紹：控件介紹

5.代碼下載

Github源碼下載：下載

除非注明，文章均由?Dotnet9?整理發(fā)布又官，歡迎轉(zhuǎn)載延刘。

轉(zhuǎn)載請注明本文地址：https://dotnet9.com/6820.html