微信公众号：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. 学_汇编语言_王爽版 要点采集笔记（未完待续&hellip;）

    第一章 基础知识 存储器(内存)存放CPU工作的指令和数据(CPU可以直接使用的信息在内存中存放):指令和数据都是二进制数没有任何区别,由CPU决定是数据还是指令 内存单元:存储器被分为若干个存储单元 ...

  2. flutter 与 android 混合开发

    现有的混合开发方式,都是存flutter项目在android系统或者iOS上面跑. 但是,实际情况是,我们需要在一个成熟的native项目上面,跑几个flutter页面,逐步的进行flutter的融合 ...

  3. 简单的在jsp页面操作mysql

    ---恢复内容开始--- 上一篇讲了在DOS界面下操作mysql 现在我们来说说怎么在jsp页面中操作mysql 要用jsp页面操作mysql需要jdbc(不是非要jdbc,还有其他的) 下载地址:w ...

  4. Zabbix3.4搭建过程

    一.安装之前把firewall 和 selinux关闭. 二.具体的搭建过程可以看zabbix官网的文档,www.zabbix.com(有中文的文档)注意如果复制官网的命令直接使用的话,不会安装mys ...

  5. <img>和background-img区别

    1. 是否占位 background-image是背景图片,是css的一个样式,不占位 <img />是一个块状元素,它是一个图片,是html的一个标签,占位 2.否可操作 backgro ...

  6. Bash 脚本中的 set -euxo pipefail

    有些开发人员会用Bash来实现很复杂的功能,就像使用别的高级语言一样.他可能觉得自己很牛逼但其他人早就想锤爆他了,Bash的可读性和可维护性远远低于任何高级语言.更要命的是,Bash并没有方便的调试工 ...

  7. char *p=new char[n] delete[] p出错

    上面不delete不出错然后下面单个输入出现乱码

  8. BZOJ 4556(后缀数组+主席树求前驱后继+二分||后缀数组+二分+可持久化线段树)

    换markdown写了.. 题意: 给你一个1e5的字符串,1e5组询问,求\([l_1,r_1]\)的所有子串与\([l_2,r_2]\)的lcp 思路: 首先可以发现答案是具有单调性的,我们考虑二 ...

  9. LeetCode 681. Next Closest Time 最近时刻 / LintCode 862. 下一个最近的时间 (C++/Java)

    题目: 给定一个"HH:MM"格式的时间,重复使用这些数字,返回下一个最近的时间.每个数字可以被重复使用任意次. 保证输入的时间都是有效的.例如,"01:34" ...

  10. 上周 GitHub 热点速览 vol.07：GitHub 官方 CLI beta 版已发布

    摘要:GitHub Trending 上周看点,GitHub 官宣 CLI 已发布 beta 版,前端新晋高性能打包神器 esbuild 宣战 Webpack&Parcel,微软.Facebo ...