阅读导航:
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
youtube design com wpf 大神处习得,简单的计算器布局界面 + 简单动画,使用的开源 c# wpf控件库 materialdesigninxaml ,本站曾有介绍:开源c# wpf控件库《materialdesigninxaml》。
三、代码实现
3.1 添加nuget库
站长使用.net core 3.1创建的wpf工程,创建“calculator”解决方案后,需要添加两个nuget库:materialdesignthemes和materialdesigncolors,上图的效果是使用该控件库实现的,非常强大。
3.2 工程结构
不需要截图,只修改了两个文件,app.xaml添加md控件样式,mainwindow主窗口实现效果。
3.3 app.xaml引入md控件样式
<application x:class="calculator.app" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:calculator" startupuri="mainwindow.xaml"> <application.resources> <resourcedictionary> <resourcedictionary.mergeddictionaries> <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.light.xaml" /> <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml" /> </resourcedictionary.mergeddictionaries> <!--primary--> <solidcolorbrush x:key="primaryhuelightbrush" color="#349fda"/> <solidcolorbrush x:key="primaryhuelightforegroundbrush" color="#ff777777"/> <solidcolorbrush x:key="primaryhuemidbrush" color="#ff222222"/> <solidcolorbrush x:key="primaryhuemidforegroundbrush" color="#dddddd"/> <solidcolorbrush x:key="primaryhuedarkbrush" color="#ff000000"/> <solidcolorbrush x:key="primaryhuedarkforegroundbrush" color="#ffffff"/> <!--accent--> <solidcolorbrush x:key="secondaryaccentbrush" color="#ffd14c25"/> <solidcolorbrush x:key="secondaryaccentforegroundbrush" color="#ffffff"/> </resourcedictionary> </application.resources> </application>
3.4 主窗体
mainwindow.xaml,整体布局,看上图加上下面的界面代码,本文基本就是布局 + 简单动画,全在这个界面,直接看代码吧,不细说了:
<window x:class="calculator.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:calculator" mc:ignorable="d" xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes" height="550" width="300" allowstransparency="true" windowstyle="none" resizemode="noresize" mousedown="window_mousedown" windowstartuplocation="centerscreen"> <window.resources> <storyboard x:key="poweroff"> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="grid"> <discreteobjectkeyframe keytime="0:0:0.2" value="{x:static visibility.visible}"/> <discreteobjectkeyframe keytime="0:0:1.5" value="{x:static visibility.visible}"/> </objectanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="grid"> <easingdoublekeyframe keytime="0:0:0.2" value="0"/> <easingdoublekeyframe keytime="0:0:1.5" value="1"/> </doubleanimationusingkeyframes> </storyboard> <storyboard x:key="poweron"> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="grid"> <discreteobjectkeyframe keytime="0" value="{x:static visibility.visible}"/> <discreteobjectkeyframe keytime="0:0:1.3" value="{x:static visibility.visible}"/> <discreteobjectkeyframe keytime="0:0:1.5" value="{x:static visibility.collapsed}"/> </objectanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="grid"> <easingdoublekeyframe keytime="0" value="1"/> <easingdoublekeyframe keytime="0:0:1.3" value="0"/> <easingdoublekeyframe keytime="0:0:1.5" value="0"/> </doubleanimationusingkeyframes> </storyboard> </window.resources> <window.triggers> <eventtrigger routedevent="buttonbase.click" sourcename="buttonpoweroff"> <beginstoryboard storyboard="{staticresource poweroff}"/> </eventtrigger> <eventtrigger routedevent="buttonbase.click" sourcename="buttonpoweron"> <beginstoryboard storyboard="{staticresource poweron}"/> </eventtrigger> </window.triggers> <border background="#e5000000" cornerradius="10"> <grid> <stackpanel> <grid height="210"> <stackpanel> <button horizontalalignment="left" margin="10" style="{staticresource materialdesignflatbutton}" foreground="{staticresource primaryhuemidforegroundbrush}"> <materialdesign:packicon kind="menu" foreground="{staticresource primaryhuelightforegroundbrush}"/> </button> <textblock fontsize="15" fontfamily="oswald" text="30 + 20 = 50" textalignment="right" foreground="{staticresource primaryhuelightforegroundbrush}" margin="20 0 20 10"/> </stackpanel> <stackpanel verticalalignment="bottom"> <textblock fontsize="20" fontfamily="oswald" text="30 + 47 + 32 -" textalignment="right" foreground="{staticresource primaryhuelightforegroundbrush}" margin="20 0"/> <textblock fontsize="50" fontfamily="oswald" text="13" textalignment="right" foreground="#ff5885a4" margin="20 0"> <textblock.effect> <dropshadoweffect blurradius="10" shadowdepth="1" color="#ff5885a4"/> </textblock.effect> </textblock> </stackpanel> </grid> <rectangle height="1" fill="gray" margin="10 0"/> <grid> <grid.columndefinitions> <columndefinition width="1*"/> <columndefinition width="1*"/> <columndefinition width="1*"/> <columndefinition width="1*"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="1*"/> <rowdefinition height="1*"/> <rowdefinition height="1*"/> <rowdefinition height="1*"/> <rowdefinition height="1*"/> </grid.rowdefinitions> <button grid.column="0" grid.row="0" margin="5" style="{staticresource materialdesignfloatingactionbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="letterc" width="30" height="30"/> </button> <button grid.column="1" grid.row="0" margin="5" style="{staticresource materialdesignfloatingactionbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="plusminus" width="30" height="30"/> </button> <button grid.column="2" grid.row="0" margin="5" style="{staticresource materialdesignfloatingactionbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="percent" width="30" height="30"/> </button> <button grid.column="3" grid.row="0" margin="5" style="{staticresource materialdesignfloatingactionbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="division" width="30" height="30"/> </button> <button grid.column="0" grid.row="1" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number7" width="30" height="30"/> </button> <button grid.column="1" grid.row="1" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number8" width="30" height="30"/> </button> <button grid.column="2" grid.row="1" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number9" width="30" height="30"/> </button> <button grid.column="3" grid.row="1" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="multiplication" width="30" height="30"/> </button> <button grid.column="0" grid.row="2" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number4" width="30" height="30"/> </button> <button grid.column="1" grid.row="2" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number5" width="30" height="30"/> </button> <button grid.column="2" grid.row="2" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number6" width="30" height="30"/> </button> <button grid.column="3" grid.row="2" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="minus" width="30" height="30"/> </button> <button grid.column="0" grid.row="3" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number1" width="30" height="30"/> </button> <button grid.column="1" grid.row="3" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number2" width="30" height="30"/> </button> <button grid.column="2" grid.row="3" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number3" width="30" height="30"/> </button> <button grid.column="3" grid.row="3" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="plus" width="30" height="30"/> </button> <button x:name="buttonpoweroff" grid.column="0" grid.row="4" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="power" width="30" height="30"/> </button> <button grid.column="1" grid.row="4" margin="5" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="number0" width="30" height="30"/> </button> <button grid.column="2" grid.row="4" margin="5" content="." style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> </button> <button grid.column="3" grid.row="4" margin="5" style="{staticresource materialdesignfloatingactionaccentbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="equal" width="30" height="30"/> </button> </grid> </stackpanel> <border x:name="grid" cornerradius="10" background="black" visibility="collapsed" opacity="0"> <button x:name="buttonpoweron" grid.column="0" grid.row="1" margin="5" width="150" height="150" style="{staticresource materialdesignfloatingactiondarkbutton}" borderthickness="1" borderbrush="{staticresource primaryhuemidbrush}"> <materialdesign:packicon kind="power" width="80" height="80"/> </button> </border> </grid> </border> </window>
后台简单的事件
private void window_mousedown(object sender, mousebuttoneventargs e) { dragmove(); }
四、文章参考
可直接打开大神视频学习,他的youtube上还有很多代码视频哦,参考:
参考视频: design com wpf: https://www.youtube.com/watch?v=g76o79elckm
五、代码下载
文章中代码已经全部贴出,添加nuget包,复制文中代码就可以运行了。
除非注明,文章均由 dotnet9 整理发布,欢迎转载。
转载请注明本文地址:
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章(微信公众号“dotnet9_com”):
如有收获,请大力转发,给dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。