應用程式使用統計資訊 - .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=https://www.cnblogs.com/Dotnet9-com/p/"40" Foreground="#FF68E843"
x:Name="firstProgress"
>
<style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
<style.Triggers>
</style>
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=https://www.cnblogs.com/Dotnet9-com/p/"40" Foreground="#FF68E843"
x:Name="firstProgress"
>
<style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
<style.Triggers>
</style>
<style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
<style.Triggers>
</style>
<style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
<style.Triggers>
</style>
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/136.html
標籤：WPF