• .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 的微信公众号,本站会及时推送最新技术文章

    Dotnet9


    时间如流水,只能流去不流回!

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

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

  • 相关阅读:
    发送邮件(公共方法)
    Des加密解密(公共方法)
    星期几以及周,月份天数的计算(共用方法)
    生成随机字符(公共方法)
    MD5函数(公共方法)
    字符串的截取(公共方法)
    AES加密解密
    日期选择控件
    ios CAF音频转换为MP3
    iOS中获取各种文件的目录路径和文件
  • 原文地址:https://www.cnblogs.com/Dotnet9-com/p/12230628.html
Copyright © 2020-2023  润新知