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

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

本文 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）的更多相关文章

  1. C# WPF聊天界面（3/3）

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航 本文背景 代码实现 本文参考 1.本文背景 系列文章 ...

  2. 【源码分享】WPF漂亮界面框架实现原理分析及源码分享

    1 源码下载 2 OSGi.NET插件应用架构概述 3 漂亮界面框架原理概述 4 漂亮界面框架实现  4.1 主程序  4.2 主程序与插件的通讯   4.2.1 主程序获取插件注册的服务   4.2 ...

  3. WPF刷新界面之坎坷路

    WPF刷新界面之坎坷路 项目需要一个硬件检测功能,需要用到界面刷新,刚开始想用个定时器,对检测过的硬设定时添加后刷新界面. 但是很遗憾,定时器并不能进行刷新.后台检测List数据里面已经添加了很多了很 ...

  4. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  5. WPF防止界面卡死并显示加载中效果

    原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...

  6. WPF设计界面不执行代码

    一般在我们在设计WPF XAML界面时,XAML 引用一些后端的类.比如UserControl.Converter.MVVM,引用 xmlns:ALLUserControl="clr-nam ...

  7. WPF解决界面全屏化但不遮挡任务栏的问题

    原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改   </pre>&l ...

  8. Java按钮控件数组实现计算器界面

    编写程序,通过按钮数组来管理界面中的所有按钮控件,从而使用最少的代码实现模拟的计算器界面. 思路如下: 创建一个类,通过extends使其继承窗体类JFrame: 创建一个JFrame对象,使用JFr ...

  9. 人工智能计算器AI Calculator 3.3.0 具体破解思路&amp;教程

    人工智能计算器AI Calculator 3.3.0 具体破解思路&教程 [文章标题]:人工智能计算器AI Calculator 3.3.0 具体破解思路&教程 [文章作者]: Eri ...

随机推荐

  1. Java笔记---枚举类和注解

    Java笔记---枚举类和注解 一.枚举类 自定义枚举类 方式一:JDK5.0之前自定义枚举类 class Seasons { //1. 声明Seasons对象的属性 private final St ...

  2. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. 改造SuperMap的DrawHandler接口，自定义绘制的图形样式

    超图WebGL三维接口中有一个绘制的接口(new Cesium.DrawHandler(viewer, mode, clampMode),它封装了绘制完之后的式样,画完之后捕捉绘制完成的实体有一定的难 ...

  4. MYSQLl给用户授予数据库表权限

    给targetUserName用户授予databaseName单个数据库权限 grant all privileges on databaseName.* to targetUserName@&quo ...

  5. 加速github访问速度

    打开https://www.ipaddress.com/ 查询以下三个链接的DNS解析地址 github.com assets-cdn.github.com github.global.ssl.fas ...

  6. 《Git 从入门到体系》- 写给自己的话

    我听过的对我很有冲击力的观点是:知识不成体系就是垃圾.这个观点不一定对,但是却是给我的冲击很大. 我记得以前在咖啡馆和一个博士医生聊天,他提出了这个观点:知识不成体系就是垃圾.听了这个观点我很想反驳他 ...

  7. Orleans[NET Core 3.1] 学习笔记（四）（ 2 ）获取Grain的方式

    简介 在这一节,我们将介绍如何在Silo和Client中获取Grain及调用Grain Grain获取方式 从Grain内部获取: //根据特定的Key值创建或获取指定的Grain IStudent ...

  8. day17 二分查找

    # 什么叫算法 # 计算的方法 # 99 * 13 = 1287 = 13 * 100 - 13 # 查找 : 找数据 # 排序 : # 最短路径 # 我们学习的算法,都是过去时 # 了解基础的算法, ...

  9. IDAE快捷键与设置

    以前做项目的时候都是用Eclispe,来到新的公司发现IDE用的是IDEA集成开发工具,以前也用过IDEA,只是略懂略懂,以后你会发现,当你用IDEA的快捷键的时候,会6的飞起 1.IDEA常用快捷键 ...

  10. Vue 项目中 外部js 如何获取 vue 实例

    1.将main.js 中的 Vue 实例暴露出去 2.在外部js中导入main.js (    import vm from '../main' );