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

时间如流水，只能流去不流回！

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

本文 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，上图的效果是使用该控件库实现的，非常强大。

3.2 工程结构

不需要截图，只修改了两个文件，App.xaml添加MD控件样式，MainWindow主窗口实现效果。

3.3 App.xaml引入MD控件样式

<code><application>             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>
                <resourcedictionary>
            /<resourcedictionary.mergeddictionaries>
            
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            
            <solidcolorbrush>
            <solidcolorbrush>
        /<resourcedictionary>
    /<application.resources>
/<application>/<code>

3.4 主窗体

MainWindow.xaml，整体布局，看上图加上下面的界面代码，本文基本就是布局 + 简单动画，全在这个界面，直接看代码吧，不细说了：

<code><window>        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>
            <objectanimationusingkeyframes>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
            /<objectanimationusingkeyframes>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
        <storyboard>
            <objectanimationusingkeyframes>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
            /<objectanimationusingkeyframes>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
    /<window.resources>
    <window.triggers>
        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger>
        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger>
    /<window.triggers>
    <border>
        <grid>
            <stackpanel>
                <grid>
                    <stackpanel>
                        <button>
                            <packicon>
                        /<button>
                        <textblock>                                   Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0 20 10"/>
                    /<textblock>/<stackpanel>
                    <stackpanel> 

                        <textblock>                                   Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0"/>
                        <textblock>                                   Foreground="#FF5885A4" Margin="20 0">
                            <textblock.effect>
                                <dropshadoweffect>
                            /<textblock.effect>
                        /<textblock>
                    /<textblock>/<stackpanel>
                /<grid>
                <rectangle>
                <grid>
                    <grid.columndefinitions>
                        <columndefinition>
                        <columndefinition>
                        <columndefinition>
                        <columndefinition>
                    /<grid.columndefinitions>
                    <grid.rowdefinitions>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                    /<grid.rowdefinitions>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}" 

                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button> 

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                /<grid>
            /<stackpanel>
            <border>
                <button>                        Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                        BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                    <packicon>
                /<button>
            /<border>
        /<grid>
    /<border>
/<window>/<code>

后台简单的事件

<code>private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}/<code>

四、文章参考

可直接打开大神视频学习，他的YouTube上还有很多代码视频哦，参考：
参考视频： Design com WPF： https://www.youtube.com/watch?v=G76O79eLcKM

五、代码下载

文章中代码已经全部贴出，添加Nuget包，复制文中代码就可以运行了。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/6777.html

閱讀更多 沙漠盡頭的狼 的文章

關鍵字: XAML 点赞 不流