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

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

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

阅读导航

本文背景
代码实现
本文参考
源码

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.本文参考

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

4.源码

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

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

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

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

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

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

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

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

.NET CORE(C#) WPF简单菜单MVVM绑定
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定阅读导航本文背景代码实现本文参考 ...
.NET CORE(C#) WPF 值得推荐的动画菜单设计
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 值得推荐的动画菜单设计阅读导航本文背景代码实现本文 ...
.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...
C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
.NET Core 3 WPF MVVM框架 Prism系列之命令
本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的命令的用法一.创建DelegateCommand命令我们在上一篇.NET Core 3 WPF MVVM框架 Prism系列之 ...
.NET Core 3 WPF MVVM框架 Prism系列之事件聚合器
本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信一.事件聚合器在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...
简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发阅读导航常用类属性设 ...
少量代码设计一个登录界面 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发阅读导航本文背景代码 ...
简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发阅读导航本文背景代码 ...

随机推荐

Python处理URL编码
我们在访问网站时,有很多连接都是有一些特殊符号组成,例如,我在百度搜索“大鱼海棠”,结果可以看到它的搜索出来的链接是: https://www.baidu.com/s?wd=%E5%A4%A7%E9% ...
TypeScript——基本类型
关于数据类型原始类型 let bool: boolean = true; let num: number = 1; let str: string = 'i am string'; 引用类型 let ...
linux-centos7 gcc 简单使用
在虚拟机VirtualBox 安装CentOS6.3后,默认是没有安装gcc. 进入root,命令 yum -y install gcc gcc-c++ autoconf ...
hashmap 的边遍历边存储
PS: Hashmap 的一边遍历边存储,可解决例如两数之和. 无重复最长子串问题等,代码为cpp格式. 以无重复最长子串为例. class Solution { public: int length ...
基于 Serverless +企业微信打造 nCoV 疫情监控小助手
最近的一些疫情信息很让人揪心,为了方便大家掌握疫情信息,在空闲之余做了一个关于 nCoV 的疫情监控小助手.主要的功能是通过企业微信的 WebHook 来推送疫情信息.这里将使用 Serverless ...
MySQL物理物理备份与还原工具xtraBackup
(一)xtraBackup简介 xtraBackup是Percona公司开发的一款MySQL数据库备份软件,在备份模式中属于物理备份.其显著特点是开源.免费.备份执行过程中不会阻塞事物.备份可压缩.支 ...
Codeforces_807
A. 严格按照题目给的两个条件来. #include<bits/stdc++.h> using namespace std; ],b[]; int main() { ios::sync_w ...
Java并发读书笔记：Lock与ReentrantLock
Lock位于java.util.concurrent.locks包下,是一种线程同步机制,就像synchronized块一样.但是,Lock比synchronized块更灵活.更复杂. 话不多说,我们 ...
命令拼接符 || && 区别
&& 前面的命令执行成功,执行拼接符后面的命令. || 前面的命令执行失败,执行拼接符后面的命令. 举例: (1)whoami && net user 真 ...
20191225--python学习第二天笔记（补）
1.内容回顾学习计算机基础安装解释器 2.语法 print/input 整型 int/字符串 str/布尔类型 boolen 条件语句 and运算符变量 3.练习评分规则:用户输入成绩,根据成 ...

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

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

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体布局

3.本文参考

4.源码

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

随机推荐

热门专题