微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，

如果对您有所帮助：欢迎赞赏。

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

阅读导航

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

1. 本文背景

使用简单动画实现抽屉式菜单

2. 代码实现

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

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

  • AnimatedColorfulMenu

    • App.xaml
    • MainWindow.xaml

2.1 引入样式

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

<Application.Resources>

    <ResourceDictionary>

        <ResourceDictionary.MergedDictionaries>

            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.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.Indigo.xaml" />

        </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

</Application.Resources>

2.2 演示窗体布局

文件【MainWindow.xaml】，代码不多，主要看左侧菜单，启动时，菜单在显示窗体左侧-150位置；点击展开菜单，使用简单的动画，慢慢呈现在显示窗体左侧，源码如下：

<Window x:Class="AnimatedColorfulMenu.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

        mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize"

        WindowStartupLocation="CenterScreen" WindowStyle="None">

    <Window.Resources>

        <Storyboard x:Key="CloseMenu">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">

                <EasingDoubleKeyFrame KeyTime="0" Value="150"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">

                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Key="OpenMenu">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </Window.Resources>

    <Window.Triggers>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonClose">

            <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>

        </EventTrigger>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpen">

            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>

        </EventTrigger>

    </Window.Triggers>

    <Grid>

        <Grid x:Name="GridBackground" Background="#55313131" Opacity="0"/>

        <Button x:Name="ButtonOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">

            <materialDesign:PackIcon Kind="Menu" Foreground="#FF313131"/>

        </Button>

        <!--左侧抽屉菜单，默认在显示窗体之外，点击菜单图标再通过简单的动画呈现出来-->

        <Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0" Background="White" RenderTransformOrigin="0.5,0.5">

            <Grid.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Grid.RenderTransform>

            <StackPanel>

                <Image Height="140" Source="https://img.dotnet9.com/logo-foot.png" Stretch="Fill"/>

                <ListView Foreground="#FF313131" FontFamily="Champagne &amp; Limousines" FontSize="18">

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="Recycle" Width="20" Height="20" Foreground="Gray" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="回收" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="HelpCircleOutline" Width="20" Height="20" Foreground="#FFF08033" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="帮助" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="Lightbulb" Width="20" Height="20" Foreground="Green" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="发送反馈" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="Heart" Width="20" Height="20" Foreground="#FFD41515" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="推荐" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="StarCircle" Width="20" Height="20" Foreground="#FFE6A701" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="溢价认购" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                    <ListViewItem Height="45" Padding="0">

                        <StackPanel Orientation="Horizontal" Margin="10 0">

                            <materialDesign:PackIcon Kind="Settings" Width="20" Height="20" Foreground="#FF0069C1" Margin="5" VerticalAlignment="Center"/>

                            <TextBlock Text="设置" Margin="10"/>

                        </StackPanel>

                    </ListViewItem>

                </ListView>

            </StackPanel>

            <Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="#CCC" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">

                <materialDesign:PackIcon Kind="Close"/>

            </Button>

        </Grid>

    </Grid>

</Window>

3.本文参考

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

4.源码

效果图实现代码在文中已经全部给出，可直接Copy，按解决方案目录组织代码文件即可运行。

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


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


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


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

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

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

.NET CORE(C#) WPF 抽屉式菜单的更多相关文章

  1. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

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

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 值得推荐的动画菜单设计 阅读导航 本文背景 代码实现 本文 ...

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

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  4. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

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

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的命令的用法 一.创建DelegateCommand命令 我们在上一篇.NET Core 3 WPF MVVM框架 Prism系列之 ...

  6. .NET Core 3 WPF MVVM框架 Prism系列之事件聚合器

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信 一.事件聚合器  在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...

  7. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发 阅读导航 常用类属性设 ...

  8. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  9. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

随机推荐

  1. 一个基于RabbitMQ的可复用的事务消息方案

    前提 分布式事务是微服务实践中一个比较棘手的问题,在笔者所实施的微服务实践方案中,都采用了折中或者规避强一致性的方案.参考Ebay多年前提出的本地消息表方案,基于RabbitMQ和MySQL(JDBC ...

  2. web自动化环境配置

    1.下载chrome浏览器对应版本的驱动 下载地址:https://npm.taobao.org/mirrors/chromedriver 2.下载后将chromedriver放到python安装路径 ...

  3. Kotlin Android项目静态检查工具的使用

    Kotlin Android项目静态检查工具的使用 Kotlin Android项目可用的静态检查工具: Android官方的Lint, 第三方的ktlint和detekt. 静态检查工具 静态检查工 ...

  4. Django自动化测试平台项目案例

    引言 在项目组待了近半年时间,根据自己的感受和体验,做了一个辅助测试的工具(数据预报平台),主要目的是针对目前项目接口文档缺失,自动化预报脚本无法可视化,资源循环利用,统一管理化. 业务背景 我们项目 ...

  5. PAT_B_PRAC_1003养兔子

    题目描述 一只成熟的兔子每天能产下一胎兔子.每只小兔子的成熟期是一天. 某人领养了一只小兔子,请问第N天以后,他将会得到多少只兔子. 输入描述: 测试数据包括多组,每组一行,为整数n(1≤n≤90). ...

  6. Spring Boot自动装配原理源码分析

    1.环境准备 使用IDEA Spring Initializr快速创建一个Spring Boot项目 添加一个Controller类 @RestController public class Hell ...

  7. WeChall_Training: Get Sourced (Training)

    The solution is hidden in this page Use View Sourcecode to get it 解题: 网页源码,最后一行 <!-- You are look ...

  8. Codeforces 1117C Magic Ship (二分)

    题意: 船在一个坐标,目的地在一个坐标,每天会有一个风向将船刮一个单位,船也可以移动一个单位或不动,问最少几天可以到目的地 思路: 二分天数,对于第k天 可以分解成船先被吹了k天,到达坐标(x1+su ...

  9. C# WinForm 使用SMTP协议发送QQ邮箱验证码

    文章来自:https://blog.csdn.net/IT_xiao_guang_guang/article/details/104336604 前言   在程序设计中,发送验证码是常见的一个功能,用 ...

  10. Apache Tomcat文件包含漏洞紧急修复

    Tomcat 漏洞 tomcat有漏洞, 需要升级到9.0.31 https://cert.360.cn/warning/detail?id=849be16c6d2dd909ff56eee7e26ae ...