關鍵功能點
- 抽屜式菜單
- 圓形進度條
Demo演示：
1. 新建項目
使用 VS 2019 的 .NET Core 3.1 WPF 項目模板，創建名為 “MobileAppUsageDashboardCore” 的項目，NuGet 引入 MaterialDesign 的兩個庫 MaterialDesignThemes 和 MaterialDesignColors，整個項目工程文件如下：
<code><project>
<propertygroup>
<outputtype>WinExe/<outputtype>
<targetframework>netcoreapp3.1/<targetframework>
<usewpf>true/<usewpf>
/<propertygroup>
<itemgroup>
<packagereference>
<packagereference>
/<itemgroup>
/<project>/<code>
2.抽屜式菜單
前面發過不少抽屜式菜單的Demo文章，套路都是一個豎直菜單隱藏在界面左邊邊界之外，左邊邊界留一個菜單按鈕，點擊該按鈕呼出豎直菜單，即達到抽屜式菜單效果。
本文介紹的抽屜式菜單也不外如是,VS設計界面見上圖，使用的MD控件的DrawerHost.LeftDrawerContent組件，換一種方式實現，下面是抽屜菜單佈局代碼：
<code><drawerhost.leftdrawercontent>
<stackpanel>
<stackpanel>
<textblock> VerticalAlignment="Center"
Margin="0,0,10,0">Dashboard/<textblock>
<button> Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
>
<packicon>
/<button>
/<stackpanel>
<stackpanel>
<button>今天/<button>
<button>本週/<button>
<button>本月/<button>
/<stackpanel>
/<stackpanel>
/<drawerhost.leftdrawercontent>/<code>
跟隨菜單隱藏的還有一個菜單關閉按鈕，見上面代碼中的第一個按鈕，點擊按鈕觸發 “DrawerHost.CloseDrawerCommand” 命令可關閉抽屜式菜單。
下面的是窗體邊界之內的菜單按鈕，點擊則展開抽屜式菜單，觸發的命令是“DrawerHost.OpenDrawerCommand”：
<code><button> HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<packicon>
/<button>/<code>
3.圓形進度條
使用MD控件庫實現圓形進度條，效果如下：
圓形進度條代碼如下，使用的還是 ProgressBar 控件，樣式使用了MD控件庫的“MaterialDesignCircularProgressBar” 樣式，組件加載時(Loaded事件)，使用了雙精度動畫：
<code><progressbar> Width="100"
Value="40" Foreground="#FF68E843"
x:Name="firstProgress"
>
<progressbar.style>
<style><br> <Style.Triggers><br> <EventTrigger RoutedEvent="Loaded"><br> <BeginStoryboard><br> <Storyboard><br> <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"<br> Duration="0:0:0.5"></DoubleAnimation><br> </Storyboard><br> </BeginStoryboard><br> </EventTrigger><br> <br> /<style>
/<progressbar.style>
/<progressbar>/<code>
4. Demo源碼
整個Demo也不難，除了上面兩個小功能單獨簡單說說外，其他的就是一般的佈局代碼了，主界面XAML代碼如下：
<code><window> 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">
<drawerhost>
<drawerhost.leftdrawercontent>
<stackpanel>
<stackpanel>
<textblock> VerticalAlignment="Center"
Margin="0,0,10,0">Dashboard/<textblock>
<button> Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
>
<packicon>
/<button>
/<stackpanel>
<stackpanel>
<button>今天/<button>
<button>本週/<button>
<button>本月/<button>
/<stackpanel>
/<stackpanel>
/<drawerhost.leftdrawercontent>
<card>
<card.background>
<lineargradientbrush>
<gradientstop>
<gradientstop>
/<lineargradientbrush>
/<card.background>
<grid>
<grid.columndefinitions>
<columndefinition>
<columndefinition>
<columndefinition>
/<grid.columndefinitions>
<stackpanel>
<stackpanel>
<button> HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<packicon>
/<button>
<textblock>
/<stackpanel>
<stackpanel>
<textblock>
<stackpanel>
<radiobutton> Margin="4"
IsChecked="True"
Content="今天">/<radiobutton>
<radiobutton> Margin="4"
IsChecked="False"
Content="本週">/<radiobutton>
<radiobutton> Margin="4"
IsChecked="False"
Content="本月">/<radiobutton>
/<stackpanel>
/<stackpanel>
<uniformgrid>
<transitioningcontent>
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition>
/<grid.rowdefinitions>
<progressbar> Width="100"
Value="40" Foreground="#FF68E843"
x:Name="firstProgress"
>
<progressbar.style>
<style><br> <Style.Triggers><br> <EventTrigger RoutedEvent="Loaded"><br> <BeginStoryboard><br> <Storyboard><br> <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"<br> Duration="0:0:0.5"></DoubleAnimation><br> </Storyboard><br> </BeginStoryboard><br> </EventTrigger><br> <br> /<style>
/<progressbar.style>
/<progressbar>
<textblock>
<textblock>
/<grid>
/<transitioningcontent>
<transitioningcontent>
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition>
/<grid.rowdefinitions>
<progressbar> Width="100"
Value="70" Foreground="#FFE84343"
x:Name="secondProgress" Margin="14,-1,13,1"
>
<progressbar.style>
<style><br> <Style.Triggers><br> <EventTrigger RoutedEvent="Loaded"><br> <BeginStoryboard><br> <Storyboard><br> <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="70"<br> Duration="0:0:0.5"></DoubleAnimation><br> </Storyboard><br> </BeginStoryboard><br> </EventTrigger><br> <br> /<style>
/<progressbar.style>
/<progressbar>
<textblock>
<textblock>
/<grid>
/<transitioningcontent>
<transitioningcontent>
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition>
/<grid.rowdefinitions>
<progressbar> Width="100"
Value="30" Foreground="#FFE8E843"
x:Name="thirdProgress"
>
<progressbar.style>
<style><br> <Style.Triggers><br> <EventTrigger RoutedEvent="Loaded"><br> <BeginStoryboard><br> <Storyboard><br> <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="30"<br> Duration="0:0:0.5"></DoubleAnimation><br> </Storyboard><br> </BeginStoryboard><br> </EventTrigger><br> <br> /<style>
/<progressbar.style>
/<progressbar>
<textblock>
<textblock>
/<grid>
/<transitioningcontent>
/<uniformgrid>
<transitioningcontent>
<stackpanel>
<textblock>
<packicon>
<textblock>
/<stackpanel>
/<transitioningcontent>
/<stackpanel>
<transitioningcontent>
<card>
<card.background>
<lineargradientbrush>
<gradientstop>
<gradientstop>
/<lineargradientbrush>
/<card.background>
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition>
/<grid.rowdefinitions>
<grid>
<grid.columndefinitions>
<columndefinition>
<columndefinition>
/<grid.columndefinitions>
<stackpanel>
<textblock>
<transitioningcontent>
<stackpanel>
<textblock>
<textblock>
/<stackpanel>
/<transitioningcontent>
<textblock>
<transitioningcontent> OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
<stackpanel>
<textblock>
<textblock>
/<stackpanel>
/<transitioningcontent>
<textblock>
<transitioningcontent>
<textblock>
/<transitioningcontent>
/<stackpanel>
<stackpanel>
<textblock>
<transitioningcontent>
<stackpanel>
<textblock>
<textblock>
/<stackpanel>
/<transitioningcontent>
<textblock>
<transitioningcontent>
<stackpanel>
<textblock>
<textblock>
/<stackpanel>
/<transitioningcontent>
<textblock>
<transitioningcontent>
<textblock>
/<transitioningcontent>
/<stackpanel>
/<grid>
<grid>
<grid.rowdefinitions>
<rowdefinition>
<rowdefinition>
<rowdefinition>
/<grid.rowdefinitions>
<stackpanel>
<grid>
<textblock>
<textblock>
/<grid>
<progressbar>
/<stackpanel>
<stackpanel>
<grid>
<textblock> Text="相冊" HorizontalAlignment="Left" VerticalAlignment="Center">/<textblock>
<textblock>
/<grid>
<progressbar>
/<stackpanel>
<stackpanel>
<grid>
<textblock>
<textblock>
/<grid>
<progressbar>
/<stackpanel>
/<grid>
/<grid>
/<card>
/<transitioningcontent>
<transitioningcontent>
<textblock>
/<transitioningcontent>
<transitioningcontent> Grid.Column="2"
OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}" Margin="0,40,0,0">
<itemscontrol>
<itemscontrol.itemspanel>
<itemspaneltemplate>
<uniformgrid>
/<itemspaneltemplate>
/<itemscontrol.itemspanel>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
<transitioningcontent>
<button>
<packicon>
/<button>
/<transitioningcontent>
/<itemscontrol>
/<transitioningcontent>
/<grid>
/<card>
/<drawerhost>
/<window>/<code>
5. 主界面後臺代碼
代碼不多，比較簡單，源碼如下：
<code>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;
}
}
}
}/<code>
3. Demo展示、源碼下載
前面演示的Demo源碼已經全部貼上。
參考視頻：WPF Dashboard UI - Material Design [Speed Design]
參考源碼：WPF-Dashboard-UI-Material-Design-Concept
分享到:
閱讀更多 沙漠盡頭的狼 的文章
