应用程序使用统计信息 - .NET CORE(C#) WPF界面设计

首发文章地址：https://dotnet9.com/10546.html

关键功能点

1. 抽屉式菜单
2. 圆形进度条

Demo演示：

1. 新建项目

使用 VS 2019 的 .NET Core 3.1 WPF 项目模板，创建名为 “MobileAppUsageDashboardCore” 的项目，NuGet 引入 MaterialDesign 的两个库 MaterialDesignThemes 和 MaterialDesignColors，整个项目工程文件如下：

WinExenetcoreapp3.1true

2.抽屉式菜单

前面发过不少抽屉式菜单的Demo文章，套路都是一个竖直菜单隐藏在界面左边边界之外，左边边界留一个菜单按钮，点击该按钮呼出竖直菜单，即达到抽屉式菜单效果。

本文介绍的抽屉式菜单也不外如是,VS设计界面见上图，使用的MD控件的DrawerHost.LeftDrawerContent组件，换一种方式实现，下面是抽屉菜单布局代码：

Dashboard今天本周本月

跟随菜单隐藏的还有一个菜单关闭按钮，见上面代码中的第一个按钮，点击按钮触发 “DrawerHost.CloseDrawerCommand” 命令可关闭抽屉式菜单。

下面的是窗体边界之内的菜单按钮，点击则展开抽屉式菜单，触发的命令是“DrawerHost.OpenDrawerCommand”：

3.圆形进度条

使用MD控件库实现圆形进度条，效果如下：

圆形进度条代码如下，使用的还是 ProgressBar 控件，样式使用了MD控件库的“MaterialDesignCircularProgressBar” 样式，组件加载时(Loaded事件)，使用了双精度动画：

4. Demo源码整个Demo也不难，除了上面两个小功能单独简单说说外，其他的就是一般的布局代码了，主界面XAML代码如下：Dashboard今天本周本月My First Material Design App-->5. 主界面后台代码代码不多，比较简单，源码如下：using System;
using System.Windows;
using System.Windows.Input;

namespace MobileAppUsageDashboardCore
{
    ////// Interaction logic for MainWindow.xaml
    ///public 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" _ue_custom_node_="true">