欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

C# WPF计算器界面(Calculator Design With Animations)

程序员文章站 2022-06-11 16:28:56
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core、Xamarin.Forms等,亦有C++桌面相关的Qt Quick和 ......

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如winform、wpf、asp.net core、xamarin.forms等,亦有c++桌面相关的qt quick和qt widgets等,只分享自己熟悉的、自己会的。

阅读导航:

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

一、先看效果

二、本文背景

youtube  design com wpf 大神处习得,简单的计算器布局界面 + 简单动画,使用的开源 c# wpf控件库 materialdesigninxaml ,本站曾有介绍:开源c# wpf控件库《materialdesigninxaml》

三、代码实现

3.1 添加nuget库

站长使用.net core 3.1创建的wpf工程,创建“calculator”解决方案后,需要添加两个nuget库:materialdesignthemes和materialdesigncolors,上图的效果是使用该控件库实现的,非常强大。

C# WPF计算器界面(Calculator Design With Animations)

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技术的关注和支持 。