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

关键功能点

1. 抽屉式菜单

2. 圆形进度条

Demo演示：

1. 新建项目

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

<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop"><PropertyGroup><OutputType>WinExe</OutputType><TargetFramework>netcoreapp3.1</TargetFramework><UseWPF>true</UseWPF></PropertyGroup><ItemGroup><PackageReference Include="MaterialDesignColors" Version="1.2.2" /><PackageReference Include="MaterialDesignThemes" Version="3.0.1" /></ItemGroup></Project>

2.抽屉式菜单

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

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

<materialDesign:DrawerHost.LeftDrawerContent><StackPanel Orientation="Vertical"><StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal"><TextBlockVerticalAlignment="Center"Margin="0,0,10,0">Dashboard</TextBlock><Button Style="{StaticResource MaterialDesignFlatButton}"Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"><materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon></Button></StackPanel><StackPanel Orientation="Vertical"><Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button><Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button><Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button></StackPanel></StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

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

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

<Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"HorizontalAlignment="Left"VerticalAlignment="Top"><materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon></Button>

3.圆形进度条

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

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

<ProgressBar Height="100"Width="100"
Value="40" Foreground="#FF68E843"x:Name="firstProgress"><ProgressBar.Style><Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}"><Style.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"Duration="0:0:0.5"></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></ProgressBar.Style>
</ProgressBar>

4. Demo源码

整个Demo也不难，除了上面两个小功能单独简单说说外，其他的就是一般的布局代码了，主界面XAML代码如下：

<Window x:Class="MobileAppUsageDashboardCore.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"TextElement.Foreground="{DynamicResource MaterialDesignBody}"TextElement.FontWeight="Regular"TextElement.FontSize="13"TextOptions.TextFormattingMode="Ideal"TextOptions.TextRenderingMode="Auto"Background="{DynamicResource MaterialDesignPaper}"FontFamily="{DynamicResource MaterialDesignFont}"Title="应用程序使用统计信息" Height="450" Width="800" WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None" MouseLeftButtonDown="dragME"><materialDesign:DrawerHost x:Name="mainDrawer"><materialDesign:DrawerHost.LeftDrawerContent><StackPanel Orientation="Vertical"><StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal"><TextBlockVerticalAlignment="Center"Margin="0,0,10,0">Dashboard</TextBlock><Button Style="{StaticResource MaterialDesignFlatButton}"Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"><materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon></Button></StackPanel><StackPanel Orientation="Vertical"><Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button><Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button><Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button></StackPanel></StackPanel></materialDesign:DrawerHost.LeftDrawerContent><materialDesign:Card HorizontalAlignment="Stretch" VerticalAlignment="Stretch"><materialDesign:Card.Background><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="Black" Offset="1"/><GradientStop Color="#FF474747"/></LinearGradientBrush></materialDesign:Card.Background><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><StackPanel Grid.Column="0" Orientation="Vertical" Margin="10"><StackPanel Orientation="Horizontal"><Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"HorizontalAlignment="Left"VerticalAlignment="Top"><materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon></Button><TextBlock VerticalAlignment="Center" Text="移动应用使用仪表板"></TextBlock></StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="时间段" VerticalAlignment="Center"></TextBlock><StackPanel Orientation="Horizontal" Margin="4"><RadioButton x:Name="todayRadio" Style="{StaticResource MaterialDesignTabRadioButton}"Margin="4"IsChecked="True"Content="今天"></RadioButton><RadioButton x:Name="weekRadio" Style="{StaticResource MaterialDesignTabRadioButton}"Margin="4"IsChecked="False"Content="本周"></RadioButton><RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}"Margin="4"IsChecked="False"Content="本月"></RadioButton></StackPanel></StackPanel><UniformGrid Columns="3" Margin="0,10,0,0"><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Grid><Grid.RowDefinitions><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><ProgressBar Height="100"Width="100"Value="40" Foreground="#FF68E843"x:Name="firstProgress"><ProgressBar.Style><Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}"><Style.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"Duration="0:0:0.5"></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></ProgressBar.Style></ProgressBar><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 5 小时"></TextBlock><TextBlock Grid.Row="1" Text="百度" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock></Grid></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Grid><Grid.RowDefinitions><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><ProgressBar Height="100"Width="100"Value="70" Foreground="#FFE84343"x:Name="secondProgress" Margin="14,-1,13,1"><ProgressBar.Style><Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}"><Style.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="70"Duration="0:0:0.5"></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></ProgressBar.Style></ProgressBar><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 3 小时"></TextBlock><TextBlock Grid.Row="1" Text="阿里巴巴" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock></Grid></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Grid><Grid.RowDefinitions><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><ProgressBar Height="100"Width="100"Value="30" Foreground="#FFE8E843"x:Name="thirdProgress"><ProgressBar.Style><Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}"><Style.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="30"Duration="0:0:0.5"></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></ProgressBar.Style></ProgressBar><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="1 小时 / 4 小时"></TextBlock><TextBlock Grid.Row="1" Text="腾讯" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock></Grid></materialDesign:TransitioningContent></UniformGrid><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn,Duration=0:0:1}"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,80,0,0"><TextBlock Text="订阅到 " VerticalAlignment="Center"></TextBlock><materialDesign:PackIcon Kind="DotNet" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon><TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" Text="www.dotnet9.com" VerticalAlignment="Center"></TextBlock></StackPanel></materialDesign:TransitioningContent></StackPanel><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"><materialDesign:Card VerticalAlignment="Stretch"><materialDesign:Card.Background><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FF09A6A6" Offset="0"/><GradientStop Color="#FF044D4D" Offset="1"/></LinearGradientBrush></materialDesign:Card.Background><Grid ><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid Grid.Row="0" Margin="5,15,5,5"><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><StackPanel Grid.Column="0"><TextBlock Text="充电" HorizontalAlignment="Center"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock><TextBlock Text=" 次" VerticalAlignment="Center"></TextBlock></StackPanel></materialDesign:TransitioningContent><TextBlock Text="最高温度" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="40" HorizontalAlignment="Center"></TextBlock><TextBlock Text=" ℃" VerticalAlignment="Center"></TextBlock></StackPanel></materialDesign:TransitioningContent><TextBlock Text="解锁" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="75" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock></materialDesign:TransitioningContent></StackPanel><StackPanel Grid.Column="1"><TextBlock Text="开机" HorizontalAlignment="Center"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="6" HorizontalAlignment="Center"></TextBlock><TextBlock Text=" 小时" VerticalAlignment="Center"></TextBlock></StackPanel></materialDesign:TransitioningContent><TextBlock Text="最后一次充电" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock><TextBlock Text=" 小时以前" VerticalAlignment="Center"></TextBlock></StackPanel></materialDesign:TransitioningContent><TextBlock Text="通知" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock><materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="350" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock></materialDesign:TransitioningContent></StackPanel></Grid><Grid Grid.Row="1" Background="#FF086666"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><StackPanel Orientation="Vertical" Grid.Row="0" Margin="5,15,5,5"><Grid><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="存储" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock><TextBlock Text="19.88 GB / 40 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock></Grid><ProgressBar Height="10" Value="19.88" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar></StackPanel><StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,15,5,5"><Grid><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="相册" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock><TextBlock Text="3 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock></Grid><ProgressBar Height="10" Value="3" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar></StackPanel><StackPanel Orientation="Vertical" Grid.Row="2" Margin="5,15,5,5"><Grid><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="视频" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock><TextBlock Text="4 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock></Grid><ProgressBar Height="10" Value="4" Maximum="40" Margin="0,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.Column="2" HorizontalAlignment="Center" VerticalAlignment="Top" OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}"><TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="最常用的应用程序" Margin="0,15,0,0"></TextBlock></materialDesign:TransitioningContent><materialDesign:TransitioningContent Grid.Column="2"OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}" Margin="0,40,0,0"><ItemsControl><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="2"></UniformGrid></ItemsPanelTemplate></ItemsControl.ItemsPanel><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Google Chrome"><materialDesign:PackIcon Kind="GoogleChrome" Height="24" Width="24" ></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube"><materialDesign:PackIcon Kind="Youtube" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Instagram"><materialDesign:PackIcon Kind="Instagram" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Facebook"><materialDesign:PackIcon Kind="Facebook" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Twitter"><materialDesign:PackIcon Kind="Twitter" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube Creator Studio"><materialDesign:PackIcon Kind="YoutubeCreatorStudio" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Adobe Reader"><materialDesign:PackIcon Kind="Adobe" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent><materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}"><Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Camera"><materialDesign:PackIcon Kind="Camera" Height="24" Width="24"></materialDesign:PackIcon></Button></materialDesign:TransitioningContent></ItemsControl></materialDesign:TransitioningContent></Grid></materialDesign:Card></materialDesign:DrawerHost>
</Window>

5. 主界面后台代码

代码不多，比较简单，源码如下：

using System;
using System.Windows;
using System.Windows.Input;namespace MobileAppUsageDashboardCore
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>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