微信公众号：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. Qt常用UI控件读取、写入方法

    本文用途:快速备忘,方便调用,写熟了自然就记下了. [1.标签label] 读取:ui->label->text() 写入:ui->label->setText("p ...

  2. 使用dlib自带的面向梯度直方图（HOG)和线性分类器方法来检测人脸

    之前使用opencv里面CascadeClassifier(级联分类器)来识别人脸, 下面使用dlib库来实现人脸识别. dlib是一个开源的库,它包含了很多内容有机器学习,图像处理,数值算法等等. ...

  3. 工具之awk

    转自:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...

  4. mysql 1071错误,原因是Mysql的字段设置的太长了

    mysql 1071错误,原因是Mysql的字段设置的太长了 mysql 1071错误经过查询才知道,是Mysql的字段设置的太长了,于是我把这两个字段的长度改了一下就好了. 建立索引时,数据库计算k ...

  5. laravel 初学路由简单介绍

    文档中的路由详细演示[初学laravel]对应laravel 的框架目录:routes/web.php 路由的格式一:Route::get($uri,$callback); 1.简单的浏览器输出 Ro ...

  6. springboot整合elasticJob实战(纯代码开发三种任务类型用法)以及分片系统,事件追踪详解

    一 springboot整合 介绍就不多说了,只有这个框架是当当网开源的,支持分布式调度,分布式系统中非常合适(两个服务同时跑不会重复,并且可灵活配置分开分批处理数据,贼方便)! 这里主要还是用到zo ...

  7. 关于JavaScript的DOM和BOM

    本文探讨JavaScript的三大部分中的两个部分,DOM和BOM. DOM介绍 DOM,全称Document Object Model,即文档对象模型.它 是W3C的一个标准,定义了一个对文档操作的 ...

  8. POJ_3663_贪心

    题目描述: 给你一堆数和一个限定的空间大小,要求求出两个数的和小于等于空间大小的对数. 思路: 贪心,先给一堆数从大到小排序. 第一个数取数组第一个,第二个数从第二个开始依次往后取,只要某个第二个数满 ...

  9. CCF_201604-1_折点计数

    (a[i]-a[i-1])*(a[i]-a[i+1]) > 0 的点符合条件 #include<cstdio> #include<iostream> using name ...

  10. 在form子句中使用子查询时的注意事项

    今天中午为了弄清这个问题,本人真的是头都搞大了!最后明白了一点,在from子句中使用子查询是,一定要将临时表的别名带上,否则会灰常痛苦!!!