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

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

本文 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 十大优化 与 防盗链

    Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为“engine X”,是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器．Ngin ...

  2. python2 + Django 中文传到模板页面变Unicode乱码问题

    1.确保views页面首行设置了默认编码   # -*-coding:utf-8 -*- 2.确保html页面的编码为 utf-8 3.确保项目setting文件设置了 LANGUAGE_CODE = ...

  3. js位运算-按位非

    正数 取得二进制表示 取反(发现符号位是1,表示负数) 符号位不变,其余位取反 取反后加一 负数 取得负数的二进制表示(即绝对值的二进制反码加一) 取反即可

  4. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...

  5. 在虚拟机中使用NetToPLCSim和PLC相连.

    1,虚拟机...系统Win10...里面安装了VS. 2,本机...系统Win10...里面安装了博图15. 3,转换软件:NetToPLCSIM. 4,本机和虚拟机连接同一个路由器.注意: 5,设置 ...

  6. Windows server 2012 出现大量无名已断开连接用户清楚办法

    打开cmd命令窗口,执行  taskkill /f /im winlogon.exe /t

  7. 限制input输入框只能输入 数字

    <input type="text" oninput = "value=value.replace(/[^\d]/g,'')">

  8. Python学习零基础＜入门必学＞

    1. 注释注释 是任何存在于 # 号右侧的文字,其主要用作写给程序读者看的笔记. 2. 字面常量一个字面常量(Literal Constants)的例子是诸如 5.1.23 这样的数字,或者是如 这是 ...

  9. jsp的九大内置对象+四大作用域

    1.request是httpServletRequest的对象,代表发送的请求信息 2.response是httpServletResponse的对象,代表响应请求返回的信息 3.session会话是 ...

  10. Hook 初学习

    Hook 概念 百度上的概念 每个Hook都有一个相关的指针列表,后加入的Hook再链表的开始,先加入的在链表的尾部 即后加入先获得控制权 Hook 原理 原本的流程 graph LR id1(Mes ...