金山郑州阳网站建设,外贸网站虚拟主机,对网页设计的简单理解,网站建设推广好做吗本文首发地址#xff1a;https://dotnet9.com/10546.html关键功能点抽屉式菜单圆形进度条Demo演示#xff1a;1. 新建项目使用 VS 2019 的 .NET Core 3.1 WPF 项目模板#xff0c;创建名为 “MobileAppUsageDashboardCore” 的项目#xff0c;NuGet 引入 MaterialDesign 的… 本文首发地址https://dotnet9.com/10546.html关键功能点抽屉式菜单圆形进度条Demo演示1. 新建项目使用 VS 2019 的 .NET Core 3.1 WPF 项目模板创建名为 “MobileAppUsageDashboardCore” 的项目NuGet 引入 MaterialDesign 的两个库 MaterialDesignThemes 和 MaterialDesignColors整个项目工程文件如下Project SdkMicrosoft.NET.Sdk.WindowsDesktopPropertyGroupOutputTypeWinExe/OutputTypeTargetFrameworknetcoreapp3.1/TargetFrameworkUseWPFtrue/UseWPF/PropertyGroupItemGroupPackageReference IncludeMaterialDesignColors Version1.2.2 /PackageReference IncludeMaterialDesignThemes Version3.0.1 //ItemGroup/Project2.抽屉式菜单前面发过不少抽屉式菜单的Demo文章套路都是一个竖直菜单隐藏在界面左边边界之外左边边界留一个菜单按钮点击该按钮呼出竖直菜单即达到抽屉式菜单效果。本文介绍的抽屉式菜单也不外如是,VS设计界面见上图使用的MD控件的DrawerHost.LeftDrawerContent组件换一种方式实现下面是抽屉菜单布局代码materialDesign:DrawerHost.LeftDrawerContentStackPanel OrientationVerticalStackPanel Margin10 VerticalAlignmentTop OrientationHorizontalTextBlockVerticalAlignmentCenterMargin0,0,10,0Dashboard/TextBlockButton Style{StaticResource MaterialDesignFlatButton}Command{x:Static materialDesign:DrawerHost.CloseDrawerCommand}materialDesign:PackIcon KindHamburgerMenuBack/materialDesign:PackIcon/Button/StackPanelStackPanel OrientationVerticalButton Style{StaticResource MaterialDesignFlatButton} ClicktodayBtnClicked今天/ButtonButton Style{StaticResource MaterialDesignFlatButton} ClickweekBtnClicked本周/ButtonButton Style{StaticResource MaterialDesignFlatButton} ClickmonthBtnClicked本月/Button/StackPanel/StackPanel
/materialDesign:DrawerHost.LeftDrawerContent跟随菜单隐藏的还有一个菜单关闭按钮见上面代码中的第一个按钮点击按钮触发 “DrawerHost.CloseDrawerCommand” 命令可关闭抽屉式菜单。下面的是窗体边界之内的菜单按钮点击则展开抽屉式菜单触发的命令是“DrawerHost.OpenDrawerCommand”Button Style{StaticResource MaterialDesignFlatButton} Command{x:Static materialDesign:DrawerHost.OpenDrawerCommand}HorizontalAlignmentLeftVerticalAlignmentTopmaterialDesign:PackIcon KindHamburgerMenu/materialDesign:PackIcon/Button3.圆形进度条使用MD控件库实现圆形进度条效果如下圆形进度条代码如下使用的还是 ProgressBar 控件样式使用了MD控件库的“MaterialDesignCircularProgressBar” 样式组件加载时(Loaded事件)使用了双精度动画ProgressBar Height100Width100
Value40 Foreground#FF68E843x:NamefirstProgressProgressBar.StyleStyle TargetTypeProgressBar BasedOn{StaticResource MaterialDesignCircularProgressBar}Style.TriggersEventTrigger RoutedEventLoadedBeginStoryboardStoryboardDoubleAnimation Storyboard.TargetPropertyValue From0 To40Duration0:0:0.5/DoubleAnimation/Storyboard/BeginStoryboard/EventTrigger/Style.Triggers/Style/ProgressBar.Style
/ProgressBar4. Demo源码整个Demo也不难除了上面两个小功能单独简单说说外其他的就是一般的布局代码了主界面XAML代码如下Window x:ClassMobileAppUsageDashboardCore.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006mc:IgnorabledTextElement.Foreground{DynamicResource MaterialDesignBody}TextElement.FontWeightRegularTextElement.FontSize13TextOptions.TextFormattingModeIdealTextOptions.TextRenderingModeAutoBackground{DynamicResource MaterialDesignPaper}FontFamily{DynamicResource MaterialDesignFont}Title应用程序使用统计信息 Height450 Width800 WindowStartupLocationCenterScreen AllowsTransparencyTrue WindowStyleNone MouseLeftButtonDowndragMEmaterialDesign:DrawerHost x:NamemainDrawermaterialDesign:DrawerHost.LeftDrawerContentStackPanel OrientationVerticalStackPanel Margin10 VerticalAlignmentTop OrientationHorizontalTextBlockVerticalAlignmentCenterMargin0,0,10,0Dashboard/TextBlockButton Style{StaticResource MaterialDesignFlatButton}Command{x:Static materialDesign:DrawerHost.CloseDrawerCommand}materialDesign:PackIcon KindHamburgerMenuBack/materialDesign:PackIcon/Button/StackPanelStackPanel OrientationVerticalButton Style{StaticResource MaterialDesignFlatButton} ClicktodayBtnClicked今天/ButtonButton Style{StaticResource MaterialDesignFlatButton} ClickweekBtnClicked本周/ButtonButton Style{StaticResource MaterialDesignFlatButton} ClickmonthBtnClicked本月/Button/StackPanel/StackPanel/materialDesign:DrawerHost.LeftDrawerContentmaterialDesign:Card HorizontalAlignmentStretch VerticalAlignmentStretchmaterialDesign:Card.BackgroundLinearGradientBrush EndPoint0.5,1 StartPoint0.5,0GradientStop ColorBlack Offset1/GradientStop Color#FF474747//LinearGradientBrush/materialDesign:Card.BackgroundGridGrid.ColumnDefinitionsColumnDefinition Width2*/ColumnDefinitionColumnDefinition Width*/ColumnDefinitionColumnDefinition Width*/ColumnDefinition/Grid.ColumnDefinitionsStackPanel Grid.Column0 OrientationVertical Margin10StackPanel OrientationHorizontalButton Style{StaticResource MaterialDesignFlatButton} Command{x:Static materialDesign:DrawerHost.OpenDrawerCommand}HorizontalAlignmentLeftVerticalAlignmentTopmaterialDesign:PackIcon KindHamburgerMenu/materialDesign:PackIcon/ButtonTextBlock VerticalAlignmentCenter Text移动应用使用仪表板/TextBlock/StackPanelStackPanel OrientationHorizontalTextBlock Text时间段 VerticalAlignmentCenter/TextBlockStackPanel OrientationHorizontal Margin4RadioButton x:NametodayRadio Style{StaticResource MaterialDesignTabRadioButton}Margin4IsCheckedTrueContent今天/RadioButtonRadioButton x:NameweekRadio Style{StaticResource MaterialDesignTabRadioButton}Margin4IsCheckedFalseContent本周/RadioButtonRadioButton x:NamemonthRadio Style{StaticResource MaterialDesignTabRadioButton}Margin4IsCheckedFalseContent本月/RadioButton/StackPanel/StackPanelUniformGrid Columns3 Margin0,10,0,0materialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindExpandIn}GridGrid.RowDefinitionsRowDefinition Height2*/RowDefinitionRowDefinition Height*/RowDefinition/Grid.RowDefinitionsProgressBar Height100Width100Value40 Foreground#FF68E843x:NamefirstProgressProgressBar.StyleStyle TargetTypeProgressBar BasedOn{StaticResource MaterialDesignCircularProgressBar}Style.TriggersEventTrigger RoutedEventLoadedBeginStoryboardStoryboardDoubleAnimation Storyboard.TargetPropertyValue From0 To40Duration0:0:0.5/DoubleAnimation/Storyboard/BeginStoryboard/EventTrigger/Style.Triggers/Style/ProgressBar.Style/ProgressBarTextBlock HorizontalAlignmentCenter VerticalAlignmentCenter Text2 小时 / 5 小时/TextBlockTextBlock Grid.Row1 Text百度 HorizontalAlignmentCenter Margin0,5,0,0/TextBlock/Grid/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindExpandIn}GridGrid.RowDefinitionsRowDefinition Height2*/RowDefinitionRowDefinition Height*/RowDefinition/Grid.RowDefinitionsProgressBar Height100Width100Value70 Foreground#FFE84343x:NamesecondProgress Margin14,-1,13,1ProgressBar.StyleStyle TargetTypeProgressBar BasedOn{StaticResource MaterialDesignCircularProgressBar}Style.TriggersEventTrigger RoutedEventLoadedBeginStoryboardStoryboardDoubleAnimation Storyboard.TargetPropertyValue From0 To70Duration0:0:0.5/DoubleAnimation/Storyboard/BeginStoryboard/EventTrigger/Style.Triggers/Style/ProgressBar.Style/ProgressBarTextBlock HorizontalAlignmentCenter VerticalAlignmentCenter Text2 小时 / 3 小时/TextBlockTextBlock Grid.Row1 Text阿里巴巴 HorizontalAlignmentCenter Margin0,5,0,0/TextBlock/Grid/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindExpandIn}GridGrid.RowDefinitionsRowDefinition Height2*/RowDefinitionRowDefinition Height*/RowDefinition/Grid.RowDefinitionsProgressBar Height100Width100Value30 Foreground#FFE8E843x:NamethirdProgressProgressBar.StyleStyle TargetTypeProgressBar BasedOn{StaticResource MaterialDesignCircularProgressBar}Style.TriggersEventTrigger RoutedEventLoadedBeginStoryboardStoryboardDoubleAnimation Storyboard.TargetPropertyValue From0 To30Duration0:0:0.5/DoubleAnimation/Storyboard/BeginStoryboard/EventTrigger/Style.Triggers/Style/ProgressBar.Style/ProgressBarTextBlock HorizontalAlignmentCenter VerticalAlignmentCenter Text1 小时 / 4 小时/TextBlockTextBlock Grid.Row1 Text腾讯 HorizontalAlignmentCenter Margin0,5,0,0/TextBlock/Grid/materialDesign:TransitioningContent/UniformGridmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindExpandIn,Duration0:0:1}StackPanel OrientationHorizontal HorizontalAlignmentCenter Margin0,80,0,0TextBlock Text订阅到 VerticalAlignmentCenter/TextBlockmaterialDesign:PackIcon KindDotNet Foreground#DDFF1212 Width100 Height100/materialDesign:PackIconTextBlock Style{StaticResource MaterialDesignBody1TextBlock} Textwww.dotnet9.com VerticalAlignmentCenter/TextBlock/StackPanel/materialDesign:TransitioningContent/StackPanelmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindSlideInFromTop} Grid.Column1 HorizontalAlignmentStretch VerticalAlignmentStretchmaterialDesign:Card VerticalAlignmentStretchmaterialDesign:Card.BackgroundLinearGradientBrush EndPoint0.5,1 StartPoint0.5,0GradientStop Color#FF09A6A6 Offset0/GradientStop Color#FF044D4D Offset1//LinearGradientBrush/materialDesign:Card.BackgroundGrid Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid Grid.Row0 Margin5,15,5,5Grid.ColumnDefinitionsColumnDefinition Width*/ColumnDefinitionColumnDefinition Width*/ColumnDefinition/Grid.ColumnDefinitionsStackPanel Grid.Column0TextBlock Text充电 HorizontalAlignmentCenter/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn, Duration0:0:2}StackPanel OrientationHorizontal HorizontalAlignmentCenter Margin0,10,0,0TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text4 HorizontalAlignmentCenter/TextBlockTextBlock Text 次 VerticalAlignmentCenter/TextBlock/StackPanel/materialDesign:TransitioningContentTextBlock Text最高温度 HorizontalAlignmentCenter Margin0,25,0,0/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn, Duration0:0:2}StackPanel OrientationHorizontal HorizontalAlignmentCenter Margin0,10,0,0TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text40 HorizontalAlignmentCenter/TextBlockTextBlock Text ℃ VerticalAlignmentCenter/TextBlock/StackPanel/materialDesign:TransitioningContentTextBlock Text解锁 HorizontalAlignmentCenter Margin0,25,0,0/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn,Duration0:0:2}TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text75 HorizontalAlignmentCenter Margin0,10,0,0/TextBlock/materialDesign:TransitioningContent/StackPanelStackPanel Grid.Column1TextBlock Text开机 HorizontalAlignmentCenter/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn, Duration0:0:2}StackPanel OrientationHorizontal HorizontalAlignmentCenter Margin0,10,0,0TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text6 HorizontalAlignmentCenter/TextBlockTextBlock Text 小时 VerticalAlignmentCenter/TextBlock/StackPanel/materialDesign:TransitioningContentTextBlock Text最后一次充电 HorizontalAlignmentCenter Margin0,25,0,0/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn, Duration0:0:2}StackPanel OrientationHorizontal HorizontalAlignmentCenter Margin0,10,0,0TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text4 HorizontalAlignmentCenter/TextBlockTextBlock Text 小时以前 VerticalAlignmentCenter/TextBlock/StackPanel/materialDesign:TransitioningContentTextBlock Text通知 HorizontalAlignmentCenter Margin0,25,0,0/TextBlockmaterialDesign:TransitioningContent OpeningEffect{materialDesign:TransitionEffect KindFadeIn,Duration0:0:2}TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text350 HorizontalAlignmentCenter Margin0,10,0,0/TextBlock/materialDesign:TransitioningContent/StackPanel/GridGrid Grid.Row1 Background#FF086666Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsStackPanel OrientationVertical Grid.Row0 Margin5,15,5,5GridTextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text存储 HorizontalAlignmentLeft VerticalAlignmentCenter/TextBlockTextBlock Text19.88 GB / 40 GB HorizontalAlignmentRight VerticalAlignmentCenter/TextBlock/GridProgressBar Height10 Value19.88 Maximum40 Margin0,10,0,0 Foreground#FF1E1E1E/ProgressBar/StackPanelStackPanel OrientationVertical Grid.Row1 Margin5,15,5,5GridTextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text相册 HorizontalAlignmentLeft VerticalAlignmentCenter/TextBlockTextBlock Text3 GB HorizontalAlignmentRight VerticalAlignmentCenter/TextBlock/GridProgressBar Height10 Value3 Maximum40 Margin0,10,0,0 Foreground#FF1E1E1E/ProgressBar/StackPanelStackPanel OrientationVertical Grid.Row2 Margin5,15,5,5GridTextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text视频 HorizontalAlignmentLeft VerticalAlignmentCenter/TextBlockTextBlock Text4 GB HorizontalAlignmentRight VerticalAlignmentCenter/TextBlock/GridProgressBar Height10 Value4 Maximum40 Margin0,10,0,0 Foreground#FF1E1E1E/ProgressBar/StackPanel/Grid/Grid/materialDesign:Card/materialDesign:TransitioningContent!--TextBlock Style{DynamicResource MaterialDesignTitleTextBlock}My First Material Design App/TextBlock--materialDesign:TransitioningContent Grid.Column2 HorizontalAlignmentCenter VerticalAlignmentTop OpeningEffect{materialDesign:TransitionEffect KindSlideInFromTop}TextBlock Style{StaticResource MaterialDesignCaptionTextBlock} Text最常用的应用程序 Margin0,15,0,0/TextBlock/materialDesign:TransitioningContentmaterialDesign:TransitioningContent Grid.Column2OpeningEffect{materialDesign:TransitionEffect KindFadeIn} Margin0,40,0,0ItemsControlItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns2/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipGoogle ChromematerialDesign:PackIcon KindGoogleChrome Height24 Width24 /materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipYouTubematerialDesign:PackIcon KindYoutube Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipInstagrammaterialDesign:PackIcon KindInstagram Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipFacebookmaterialDesign:PackIcon KindFacebook Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipTwittermaterialDesign:PackIcon KindTwitter Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipYouTube Creator StudiomaterialDesign:PackIcon KindYoutubeCreatorStudio Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipAdobe ReadermaterialDesign:PackIcon KindAdobe Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContentmaterialDesign:TransitioningContent OpeningEffectsOffset{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05} OpeningEffect{materialDesign:TransitionEffect KindExpandIn}Button Style{StaticResource MaterialDesignIconButton} ToolTipCameramaterialDesign:PackIcon KindCamera Height24 Width24/materialDesign:PackIcon/Button/materialDesign:TransitioningContent/ItemsControl/materialDesign:TransitioningContent/Grid/materialDesign:Card/materialDesign:DrawerHost
/Window5. 主界面后台代码代码不多比较简单源码如下using System;
using System.Windows;
using System.Windows.Input;namespace MobileAppUsageDashboardCore
{/// summary/// Interaction logic for MainWindow.xaml/// /summarypublic partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void todayBtnClicked(object sender, RoutedEventArgs e){mainDrawer.IsLeftDrawerOpen false;todayRadio.IsChecked true;monthRadio.IsChecked false;weekRadio.IsChecked false;}private void weekBtnClicked(object sender, RoutedEventArgs e){mainDrawer.IsLeftDrawerOpen false;todayRadio.IsChecked false;weekRadio.IsChecked true;monthRadio.IsChecked false;}private void monthBtnClicked(object sender, RoutedEventArgs e){mainDrawer.IsLeftDrawerOpen false;todayRadio.IsChecked false;weekRadio.IsChecked false;monthRadio.IsChecked true;}private void dragME(object sender, MouseButtonEventArgs e){try{DragMove();}catch (Exception){//throw;}}}
}3. Demo展示、源码下载前面演示的Demo源码已经全部贴上。参考视频WPF Dashboard UI - Material Design [Speed Design]参考源码WPF-Dashboard-UI-Material-Design-Concept
