.NET CORE(C#) WPF 值得推荐的动画菜单设计

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 值得推荐的动画菜单设计

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考
  4. 源码

1. 本文背景

YouTube上老外的一个设计，站长觉得不错，分享给大家作为参考，抽屉菜单的动画做的非常不错。

运行起始界面：

站长运行操作一遍，录制了动画大家看看：

2. 代码实现

使用 .NET CORE 3.1 创建名为 “AnimatedMenu” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

  • AnimatedMenu

    • App.xaml
    • MainWindow.xaml
      • MainWindow.xaml.cs

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

<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 Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

2.2 演示窗体

文件【MainWindow.xaml】，布局代码、动画代码都在此文件中，源码如下：

<Window x:Class="AnimatedMenu.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
        Height="600" Width="1024" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0"/>
    </WindowChrome.WindowChrome>
    <Window.Resources>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem1">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem2">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem3">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem4">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid Background="#FF3580BF">
        <StackPanel x:Name="StackPanelMenu" Width="250" HorizontalAlignment="Left" Margin="-250 0 0 0" RenderTransformOrigin="0.5,0.5">
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </StackPanel.RenderTransform>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="100" HorizontalAlignment="Center">
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                    <materialDesign:PackIcon Kind="Settings" Width="40" Height="40"/>
                </Button>
                <Button x:Name="button" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" BorderBrush="{x:Null}" Padding="0" Width="80" Height="80" Margin="10" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Button.RenderTransform>
                    <Button.Background>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
                    </Button.Background>
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                    <materialDesign:PackIcon Kind="InformationOutline" Width="40" Height="40"/>
                </Button>
            </StackPanel>
            <ListView>
                <ListViewItem x:Name="listViewItem" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="主页" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem1" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="AccountSearch" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="搜索" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem2" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Wechat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="微信" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem3" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Qqchat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="QQ" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem4" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Facebook" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="脸书" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
        </StackPanel>
        <Grid x:Name="GridMain" Background="#FFFBFBFB" Width="1024" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="250"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="1" Background="#FF3580BF">
                <Image Height="150" VerticalAlignment="Top" Source="https://dotnet9.com/wp-content/uploads/2017/04/About-Header.jpg" Stretch="UniformToFill"/>
                <Ellipse Height="100" Width="100" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="20 100" Stroke="White">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock Text="Dotnet9" Foreground="White" FontSize="28" FontFamily="Nirmala UI Semilight" Margin="10 100" VerticalAlignment="Top"/>
                <StackPanel Margin="0 150">
                    <Grid Height="60" Margin="20 50 20 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="追随者" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5"/>
                        <TextBlock Text="1.5K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0"/>

                        <TextBlock Text="跟随" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5" Grid.Column="1"/>
                        <TextBlock Text="2.3K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0" Grid.Column="1"/>
                    </Grid>

                    <TextBlock TextWrapping="Wrap" Margin="10" Foreground="#FFFBFBFB" FontSize="14">
                        <Run Text="网名：沙漠尽头的狼"/>
                        <LineBreak/>
                        <LineBreak/>
                        <Run Text="网站：https://dotnet9.com"/>
                        <LineBreak/>
                        <Run Text="    Dotnet9的博客 - 一个热衷于互联网分享精神的个人博客站点"/>
                        <LineBreak/>
                        <LineBreak/>
                        <Run Text="座右铭：时间如流水，只能流去不流回。"/>
                    </TextBlock>
                </StackPanel>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Button x:Name="ButtonCloseMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonCloseMenu_Click" Visibility="Collapsed">
                    <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                </Button>
                <Button x:Name="ButtonOpenMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonOpenMenu_Click">
                    <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                </Button>

                <TextBlock Text="照片" Foreground="#FF3580BF" FontSize="30" FontWeight="Bold" Margin="5" Grid.Row="1"/>

                <Grid Margin="5" Grid.Row="2" Grid.Column="0">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/wpf.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="25" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="2" Grid.Column="1">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/winform.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="50" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="2" Grid.Column="2">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/asp-net-core.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="18" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="3" Grid.Column="0">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://img.dotnet9.com/Xamarin.Forms.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="3" Grid.Column="1">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/front-end.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="40" HorizontalAlignment="Right" Margin="10">
            <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
                <materialDesign:PackIcon Kind="Bell"/>
            </Button>
            <Button x:Name="ButtonClose" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonClose_Click">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>
        </StackPanel>
    </Grid>
</Window>

简单说明下：

  1. "StackPanelMenu" 作为左侧菜单容器，默认是显示在窗体外，距离窗体左边缘-250，点击左上角菜单按钮图标可控制此容器的显示与隐藏，注：菜单开关由两个按钮组成 "ButtonOpenMenu" 和 "ButtonCloseMenu"。
  2. 左侧菜单项使用 "ListView" 进行布局，实际开发需要运用模板，使用MVVM做成动态菜单，方便扩展。
  3. 中间的5张演示照片，也和2类似。直接使用Grid进行的布局，实际上都需要做成模板。
  4. 抽屉菜单动画见 Window.Resouces 中的动画代码，展开抽屉菜单动画是 "OpenMenu"，左侧菜单向右、向下移动，右侧展示区域及个人信息概况界面同时也是向右、向下移动；关闭抽屉菜单动画是 "CloseMenu"，动画移动方向与展开时相反（说的是废话），这段动画代码值得好好学习、复用。

文件【MainWindow.xaml.cs】，后台关闭窗体、抽屉菜单按钮切换、窗体移动等事件处理：

private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Collapsed;
    ButtonCloseMenu.Visibility = Visibility.Visible;
}

private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Visible;
    ButtonCloseMenu.Visibility = Visibility.Collapsed;
}

private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    DragMove();
}

代码已全部奉上...

3.本文参考

  1. 视频一：C# WPF Material Design UI: Animated Menu，配套源码：AnimatedMenu1。
  2. C# WPF开源控件库《MaterialDesignInXAML》

4.源码

效果图实现代码在文中已经全部给出，站长方便演示，文中的图片使用的本站外链图片，代码可直接Copy，按解决方案目录组织代码文件即可运行。

演示Demo下载

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/7669.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章


时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

原文地址：https://www.cnblogs.com/Dotnet9-com/p/12230628.html

时间： 2024-10-25 13:32:11

.NET CORE(C#) WPF 值得推荐的动画菜单设计的相关文章

.NET CORE(C#) WPF 抽屉式菜单

原文:.NET CORE(C#) WPF 抽屉式菜单 微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 抽屉式菜单 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 使用简单动画实现抽屉式菜单 2. 代码实现 使用 .NET CORE 3.1 创建名为 "AnimatedColorfulMenu" 的WPF模板项目,添加1个Nuget库:MaterialDesignThemes,版本

【转载】值得推荐的C/C++框架和库

原文:值得推荐的C/C++框架和库 值得学习的C语言开源项目 Libevent libev是一个开源的事件驱动库,基于epoll,kqueue等OS提供的基础设施.其以高效出名,它可以将IO事件,定时器,和信号统一起来,统一放在事件处理这一套框架下处理.基于Reactor模式,效率较高,并且代码精简(4.15版本8000多行),是学习事件驱动编程的很好的资源. 下载链接:https://github.com/libevent/libevent Memcached Memcached 是一个高性能

值得推荐的C/C++开源框架和库

值得推荐的C/C++开源框架和库 转自:http://www.cnblogs.com/lidabo/p/5514155.html - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力.Webbench使用C语言编写, 代码实在太简洁,源码加起来不到600行. 下载链接:http://home.tiscali.cz/~cz21

值得推荐的C/C++框架和库（转）

值得推荐的C/C++框架和库 本文系外部转贴,原文地址: http://coolshell.info/c/c++/2014/12/13/c-open-project.htm http://www.cppblog.com/merlinfang/archive/2014/12/26/209311.aspx 下次造轮子前先看看现有的轮子吧 值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们

【转】 值得推荐的C/C++框架和库 (真的很强大)

[转] 值得推荐的C/C++框架和库 (真的很强大) 值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力.Webbench使用C语言编写, 代码实在太简洁,源码加起来不到600行. 下载链接:http://home.tiscali.cz/~cz210552/webbench.html - 2. T

值得推荐的C/C++框架和库 (真的很强大) c

http://m.blog.csdn.net/mfcing/article/details/49001887 值得推荐的C/C++框架和库 (真的很强大) 发表于2015/10/9 21:13:14  14199人阅读 分类: 开源 本篇文章主要介绍了"值得推荐的C/C++框架和库 (真的很强大)",主要涉及到方面的内容,对于C/C++教程感兴趣的同学可以参考一下: 得学习的C语言开源项目- 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使

.NET Core 3 WPF MVVM框架 Prism系列之命令

原文:.NET Core 3 WPF MVVM框架 Prism系列之命令 本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的命令的用法 一.创建DelegateCommand命令# 我们在上一篇.NET Core 3 WPF MVVM框架 Prism系列之数据绑定中知道prism实现数据绑定的方式,我们按照标准的写法来实现,我们分别创建Views文件夹和ViewModels文件夹,将MainWindow放在Views文件夹下,再在ViewModels文件夹下面创建MainWi

.NET CORE(C#) WPF亚克力窗体

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF亚克力窗体 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 本文介绍使用FluentWPF控件库实现亚克力效果的窗体. 2. 代码实现 使用 .Net Core 3.1 创建名为 "AcrylicWindow" 的WPF模板项目,添加三个Nuget库:MaterialDesignThemes.MaterialDesignColors和

.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了,祝大家新年快乐,今年2019最后一更,谢谢大家支持! 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 一个系统主界面,放上一个菜单,点击菜单在客户区切换不同的展示界面,这是很常规的设计,见下面展示效果图: 左侧一个菜单,点击菜单,右侧切换界面,界面切换动画使用MD控件的组件实现(自己