应用程序使用统计信息 - .NET CORE(C#) WPF界面设计
首发文章地址：https://dotnet9.com/10546.html
关键功能点
- 抽屉式菜单
- 圆形进度条
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">
<TextBlock
VerticalAlignment="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">
<TextBlock
VerticalAlignment="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