C# WPF计算器界面（Calculator Design With Animations）

阅读导航：

• 一、先看效果
• 二、本文背景
• 三、代码实现
• 四、文章参考
• 五、代码下载

一、先看效果

二、本文背景

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包，复制文中代码就可以运行了。