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

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

本文 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. 使用helm安装jenkin和gitlab

    一.使用服务介绍 存储: 阿里云NAS k8s网络插件: calico k8s版本: 1.15.2 二.helm安装 https://www.cnblogs.com/zhangb8042/p/1020 ...

  2. [Python]pip 国内源

    临时使用方法 pip install -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com celery END

  3. ORB-SLAM2 论文&代码学习 —— 单目初始化

    转载请注明出处,谢谢 原创作者:Mingrui 原创链接:https://www.cnblogs.com/MingruiYu/p/12358458.html 本文要点: ORB-SLAM2 单目初始化 ...

  4. 常用MySQL操作

    常用MySQL操作 更改MySQL数据库root的密码 将绝对路径加入环境变量并设置开机启动 # PATH=$PATH:/usr/local/mysql/bin # echo "PATH=$ ...

  5. Jmeter连接SqlServer数据库并操作

    jmeter支撑多种数据库,且均需要下载对应的驱动包,如下以SqlServer为例作为讲解,其他数据库类似. 1.下载jdbc驱动(注意下载对应版本),并放在jmeter的lib目录下,重启jmete ...

  6. springboot容器加载完毕执行某一个方法

    问题: 最近做项目(项目使用的是springboot)的时候,数据库有一个配置参数表,每次都要查询数据库去做数据转换,这样每次查询数据库感觉不太友好,后来写了一个方法项目启动完成后立即执行此方法,将配 ...

  7. 今日确定开源近两年来的EA程序

    从2018年开始研究mt4的mql,在2019年主要设计了NinjaLoveFishEA这款网格程序,稳定运行了1年多,今年的伊朗被袭击,造成金价大幅上涨,-18%止损我离场后,决定不再继续研究了. ...

  8. FIB表与RIB表的区别与联系

    RIB (route information base) 和 FIB (forwarding information base),又称Ip路由表 和 CEF表,它们之间的关系可以用下面这张图片来高度概 ...

  9. MySQL 8 拷贝MySQL数据库到另一台机器

    通过mysqldump生成包含SQL语句的文件,然后将其应用到目标机器的mysql客户端程序. mysqldump --help 可以获取mysqldump选项以及用法. 如果源服务器上启用了GTID ...

  10. C#开发OPC客户端

    第一个随笔,使用了OPEN Live Write,作为客户端.最近使用c#开发一个小软件,主要功能是OPC客户端.以后会开发各类别的协议,作为,协议的转发栈. 因为我本人是搞自动化的,所以搞自动化小伙 ...