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控件样式

<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 整理发布，欢迎转载。

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

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：

如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持。

C# WPF计算器界面（Calculator Design With Animations）的更多相关文章

C# WPF聊天界面（3/3）
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航本文背景代码实现本文参考 1.本文背景系列文章 ...
【源码分享】WPF漂亮界面框架实现原理分析及源码分享
1 源码下载 2 OSGi.NET插件应用架构概述 3 漂亮界面框架原理概述 4 漂亮界面框架实现 4.1 主程序 4.2 主程序与插件的通讯 4.2.1 主程序获取插件注册的服务 4.2 ...
WPF刷新界面之坎坷路
WPF刷新界面之坎坷路项目需要一个硬件检测功能,需要用到界面刷新,刚开始想用个定时器,对检测过的硬设定时添加后刷新界面. 但是很遗憾,定时器并不能进行刷新.后台检测List数据里面已经添加了很多了很 ...
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
WPF防止界面卡死并显示加载中效果
原文:WPF防止界面卡死并显示加载中效果网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学前台: <Window x:Class="WpfApplic ...
WPF设计界面不执行代码
一般在我们在设计WPF XAML界面时,XAML 引用一些后端的类.比如UserControl.Converter.MVVM,引用 xmlns:ALLUserControl="clr-nam ...
WPF解决界面全屏化但不遮挡任务栏的问题
原文:WPF解决界面全屏化但不遮挡任务栏的问题学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改 </pre>&l ...
Java按钮控件数组实现计算器界面
编写程序,通过按钮数组来管理界面中的所有按钮控件,从而使用最少的代码实现模拟的计算器界面. 思路如下: 创建一个类,通过extends使其继承窗体类JFrame: 创建一个JFrame对象,使用JFr ...
人工智能计算器AI Calculator 3.3.0 具体破解思路&教程
人工智能计算器AI Calculator 3.3.0 具体破解思路&教程 [文章标题]:人工智能计算器AI Calculator 3.3.0 具体破解思路&教程 [文章作者]: Eri ...

随机推荐

div中元素水平居中的方法
使用align属性 <div class="main" align="center"> <h1>MAIN</h1&g ...
JavaScript——event事件详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
JavaScript-迭代器模式
迭代器模式顺序访问一个集合使用者无需知道集合内部结构(封装) jQuery 示例 <!DOCTYPE html> <html> <head> <meta ...
JavaScript中基本数据类型之间的转换
在JavaScript中共有六种数据类型,其中有五种是基本数据类型,还有一种则是引用数据类型.五种基本数据类型分别是:Number 数值类型.String 字符串类型.Boolean 布尔类型, nu ...
redis 5.0.7 源码阅读——跳跃表skiplist
redis中并没有专门给跳跃表两个文件.在5.0.7的版本中,结构体的声明与定义.接口的声明在server.h中,接口的定义在t_zset.c中,所有开头为zsl的函数. 一.数据结构单个节点: t ...
opencv —— setMouseCallback 响应鼠标操作事件
鼠标操作:setMouseCallback 函数借助回调函数,实现对鼠标每次操作的相应,即每进行一步鼠标操作,都会执行一次回调函数. void setMouseCallback(const stri ...
CSRF防护
CSRF防护 (待完善...)
node模块化开发基本知识学习笔记
传统非模块化开发缺点: 1.命名冲突 2.文件依赖标准的模块化规范: 1.AMD-requirejs 2.CMD-seajs 服务器端模块化规范: 1.CommonJS-Node.js 模块化相关的 ...
并发编程之J.U.C的第一篇
并发编程之J.U.C AQS 原理 ReentrantLock 原理 1. 非公平锁实现原理 2)可重入原理 3. 可打断原理 5) 条件变量实现原理 3. 读写锁 3.1 ReentrantRead ...
wondiws+centos 双系统
任务:在windows下安装CentOS 1.下载CentOS镜像文件,准备一个未格式化的空间. 2.使用UltraISO将要安装的系统写入U盘. 3.用U盘启动,将系统装入一个空的分区下(未格式化) ...