微信公众号：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. xpath写法大全（适用于selenium、robotframework）

    1.//input[contains(@id, 'txttags')] 定位出来是个ID,但是ID后面的“102”是个随机数,所以用定位ID的方法就不行了,用firepath生成的xpath也会包括这 ...

  2. （初学JS）JS基础——ATM机终端程序编写<1.0>

    初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...

  3. ThinkPHP 5.0.7 + MySQL 构建RESTful API的小程序---02-ThinkPHP5中的orm的模型关联

    ThinkPHP5.0中的操作ORM的一对一,一对多,多对多的操作: 由以下表举例: banner表的设计 id name description delete_time update_time 1 ...

  4. openlayer3 坐标系转换

    'EPSG:4326'-经纬度坐标-WGS84'EPSG:3857'- xy坐标-web墨卡托 ol3默认的坐标系为3857,即在创建ol.map的时候,若不指定projection,则默认为EPSG ...

  5. Docker三剑客之Machine

    前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...

  6. java正则使用全记录!

    一 开坑! 场景: 将动态uri中{} 替换成 至少出现一次的任意字符进行匹配, 比如 loclahost:8080/{name}/{9527}  -> localhost:8080/.{1,} ...

  7. C++使用类调用CUDA核函数

    正如CUDA C所称,CUDA对C语言进行了很好的扩展,直接使用C语言可以非常简单方便的调用CUDA核函数.但是当想使用C++的类成员函数直接调用核函数是不可行的,第一,核函数不能作为类的成员函数,第 ...

  8. 【Pycharm使用者必看】自定义【光标快速定位到行尾】的按键

    1.问题描述 使用Pycharm写代码时,有很多比较方便的快捷键,比如:Shift+Enter快速切换到下一行, 但每次切换到多个括号外或者想移动到行尾,就必须按 End 键或者鼠标点击, 这样操作幅 ...

  9. Newcoder Wannafly13 B Jxy军训（费马小定理、分数在模意义下的值）

    链接:https://www.nowcoder.com/acm/contest/80/B 题目描述 在文某路学车中学高一新生军训中,Jxc正站在太阳下站着军姿,对于这样的酷热的阳光,Jxc 表示非常不 ...

  10. java12类的无参方法

    package com.jh.test01; public class AutoLion { // 属性: 颜色 黄色 String color = "黄色"; // 函数:跑,叫 ...