应用程序使用统计信息 – .NET CORE(C#) WPF界面设计
程序员文章站
2022-12-21 08:11:18
应用程序使用统计信息 .NET CORE(C ) WPF界面设计 首发文章地址：https://dotnet9.com/10546.html 关键功能点 1. 抽屉式菜单 2. 圆形进度条 Demo演示： 1. 新建项目 使用 VS 2019 的 .NET Core 3.1 WPF 项目模板，创建名 ......
应用程序使用统计信息 - .net core(c#) wpf界面设计
首发文章地址：
关键功能点
- 抽屉式菜单
- 圆形进度条
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源码已经全部贴上。