阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
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技术的关注和支持 。