南京专业网站制作公司有哪些,简单网站首页,wordpress抓取公众号文章,wordpress 段落缩进.NET CORE(C#) WPF 抽屉式菜单阅读导航本文背景代码实现本文参考源码1. 本文背景使用简单动画实现抽屉式菜单2. 代码实现使用 .NET CORE 3.1 创建名为 “AnimatedColorfulMenu” 的WPF模板项目#xff0c;添加1个Nuget库#xff1a;MaterialDesignThemes#xff0c;版本为最… .NET CORE(C#) WPF 抽屉式菜单阅读导航本文背景代码实现本文参考源码1. 本文背景使用简单动画实现抽屉式菜单2. 代码实现使用 .NET CORE 3.1 创建名为 “AnimatedColorfulMenu” 的WPF模板项目添加1个Nuget库MaterialDesignThemes版本为最新预览版3.1.0-ci948。解决方案主要文件目录组织结构AnimatedColorfulMenuApp.xamlMainWindow.xaml2.1 引入样式文件【App.xaml】在 StartupUri 中设置启动的视图【MainWindow.xaml】并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件Application.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesResourceDictionary Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml /ResourceDictionary Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml /ResourceDictionary Sourcepack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml /ResourceDictionary Sourcepack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml //ResourceDictionary.MergedDictionaries/ResourceDictionary
/Application.Resources2.2 演示窗体布局文件【MainWindow.xaml】代码不多主要看左侧菜单启动时菜单在显示窗体左侧-150位置点击展开菜单使用简单的动画慢慢呈现在显示窗体左侧源码如下Window x:ClassAnimatedColorfulMenu.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesmc:Ignorabled Height600 Width1080 ResizeModeNoResize WindowStartupLocationCenterScreen WindowStyleNoneWindow.ResourcesStoryboard x:KeyCloseMenuDoubleAnimationUsingKeyFrames Storyboard.TargetProperty(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) Storyboard.TargetNameGridMenuEasingDoubleKeyFrame KeyTime0 Value150/EasingDoubleKeyFrame KeyTime0:0:0.5 Value0//DoubleAnimationUsingKeyFramesDoubleAnimationUsingKeyFrames Storyboard.TargetProperty(UIElement.Opacity) Storyboard.TargetNameGridBackgroundEasingDoubleKeyFrame KeyTime0 Value1/EasingDoubleKeyFrame KeyTime0:0:0.5 Value0//DoubleAnimationUsingKeyFrames/StoryboardStoryboard x:KeyOpenMenuDoubleAnimationUsingKeyFrames Storyboard.TargetProperty(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) Storyboard.TargetNameGridMenuEasingDoubleKeyFrame KeyTime0 Value0/EasingDoubleKeyFrame KeyTime0:0:0.5 Value150//DoubleAnimationUsingKeyFramesDoubleAnimationUsingKeyFrames Storyboard.TargetProperty(UIElement.Opacity) Storyboard.TargetNameGridBackgroundEasingDoubleKeyFrame KeyTime0 Value0/EasingDoubleKeyFrame KeyTime0:0:0.5 Value1//DoubleAnimationUsingKeyFrames/Storyboard/Window.ResourcesWindow.TriggersEventTrigger RoutedEventButtonBase.Click SourceNameButtonCloseBeginStoryboard x:NameCloseMenu_BeginStoryboard Storyboard{StaticResource CloseMenu}//EventTriggerEventTrigger RoutedEventButtonBase.Click SourceNameButtonOpenBeginStoryboard Storyboard{StaticResource OpenMenu}//EventTrigger/Window.TriggersGridGrid x:NameGridBackground Background#55313131 Opacity0/Button x:NameButtonOpen HorizontalAlignmentLeft VerticalAlignmentTop Background{x:Null} BorderBrush{x:Null} Width30 Height30 Padding0materialDesign:PackIcon KindMenu Foreground#FF313131//Button!--左侧抽屉菜单默认在显示窗体之外点击菜单图标再通过简单的动画呈现出来--Grid x:NameGridMenu Width150 HorizontalAlignmentLeft Margin-150 0 0 0 BackgroundWhite RenderTransformOrigin0.5,0.5Grid.RenderTransformTransformGroupScaleTransform/SkewTransform/RotateTransform/TranslateTransform//TransformGroup/Grid.RenderTransformStackPanelImage Height140 Sourcehttps://img.dotnet9.com/logo-foot.png StretchFill/ListView Foreground#FF313131 FontFamilyChampagne amp; Limousines FontSize18ListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindRecycle Width20 Height20 ForegroundGray Margin5 VerticalAlignmentCenter/TextBlock Text回收 Margin10//StackPanel/ListViewItemListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindHelpCircleOutline Width20 Height20 Foreground#FFF08033 Margin5 VerticalAlignmentCenter/TextBlock Text帮助 Margin10//StackPanel/ListViewItemListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindLightbulb Width20 Height20 ForegroundGreen Margin5 VerticalAlignmentCenter/TextBlock Text发送反馈 Margin10//StackPanel/ListViewItemListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindHeart Width20 Height20 Foreground#FFD41515 Margin5 VerticalAlignmentCenter/TextBlock Text推荐 Margin10//StackPanel/ListViewItemListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindStarCircle Width20 Height20 Foreground#FFE6A701 Margin5 VerticalAlignmentCenter/TextBlock Text溢价认购 Margin10//StackPanel/ListViewItemListViewItem Height45 Padding0StackPanel OrientationHorizontal Margin10 0materialDesign:PackIcon KindSettings Width20 Height20 Foreground#FF0069C1 Margin5 VerticalAlignmentCenter/TextBlock Text设置 Margin10//StackPanel/ListViewItem/ListView/StackPanelButton x:NameButtonClose HorizontalAlignmentRight VerticalAlignmentTop Background{x:Null} Foreground#CCC BorderBrush{x:Null} Width30 Height30 Padding0materialDesign:PackIcon KindClose//Button/Grid/Grid
/Window3.本文参考视频一C# WPF Material Design UI: Animated Colorful Navigation Drawer配套源码AnimatedColorfulMenu。C# WPF开源控件库《MaterialDesignInXAML》4.源码效果图实现代码在文中已经全部给出可直接Copy按解决方案目录组织代码文件即可运行。
