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

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

本文 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. Nginx安装（yum源）

    CentOS7 $ vi /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/c ...

  2. LVS服务原理以及搭建

    一.LVS简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,目的在于使用集群技术和Linux操作系统实现一个高性能.高可用的服务器.它 ...

  3. 一起了解 .Net Foundation 项目 No.7

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Entity Framew ...

  4. 网页延迟加载动画的实现-WOW.js

    网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差 一开始觉得好难好复杂好高大上,直到我发现 wow.js …… 首先是演示地址:https://www.delac.io/wow/ 嗯,狗子确实很 ...

  5. Appium超详细环境搭建for Mac

      兜兜转转试用了一圈自动化框架后,回归到appium,与一年之前相比,appium有了很大的改变:1.iOS 9 之前一直以 instruments 下的 UIAutomation为驱动底层技术(弊 ...

  6. 【小白视频学Java for循环】3分钟学会Java的for循环，让看懂for循环嵌套再不是难事

    目录 一.单个for循环介绍 二.for循环嵌套 听讲时能听懂的for循环为什么一做题就晕菜?一个for循环还勉强能看懂,但为什么一看到双重for循环脑子里就感觉脑子全是浆糊? 如果有上述问题那么就继 ...

  7. 探究Redis两种持久化方式下的数据恢复

    对长期奋战在一线的后端开发人员来说,都知道redis有两种持久化方式RDB和AOF,虽说大家都知道这两种方式大概运作方式,但想必有实操的人不会太多. 这里是自己实操两种持久化方式的一点点记录. 先看以 ...

  8. 微信小程序入门笔记-开通云开发（3）

    1.介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API ...

  9. vue ----element-ui 文件上传upload 组件 实现 及其后台

    1.前台 action 不用改 :https://jsonplaceholder.typicode.com/posts/ getFile: 获取文件 data(){ return { file: {} ...

  10. opencv —— saturate_cast 溢出保护

    src.at<uchar>(i,j)[0] = saturate_cast<uchar>(data); if (data < 0) data = 0; else if ( ...