C# WPF上位机开发（计算器界面设计）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        c# wpf最大的优势就是开发业务软件比较快、效率比较高。一般来说，它的界面和逻辑部分可以同时开发。界面的部分用xaml编写即可，代码的部分可以先用c#来完成。说到界面，大部分的gui编辑工具都是基于grid+stack的思想来进行设计的。这么说也许有点复杂，简单一点说就有点类似于装修房子的概要设计和详细设计这两层意思。

       概要设计，主要就是先弄清楚房子里面哪里是厨房，哪里是书房，哪里是客厅，哪里是过道，这些都是先规划出来。详细设计，就是某一个房间里面，哪里放家具，哪里放床，哪里放电器这些。界面设计也是一样，我们一般也是先简单归类下，一个页面上大体有几个部分，几行几列。等这些部分确定之后，详细设计的时候，我们再看应该选择什么样的控件，前后左右距离多少，大小多少，什么样的颜色，是否居中等等。

        描述了上面一段文字，大家可能还是云里雾里，感觉比较绕，我们不妨以一个计算器为范例，看下应该如何用c#实现计算器的效果。

1、找一个计算器的参考图

        计算器大家都比较熟悉。一般就是分成两部分。上面是一个小屏幕，下面是按钮。初略来看的话，其实就是这样。

2、手动或者用mspaint绘出一个效果图

        如果图形比较复杂，最好先手动绘制一下。当然，也可以用windows自带的mspaint来进行绘制。这两种方式都是可以接受的。当然，因为今天绘制的内容比较简单，所以这里直接给出了xaml的最终效果图，

        仔细看一下效果图的话，我们发现除了之前说的界面分成了上下两部分，按钮这部分也做了一些细节的修改。比如全部数字部分都是黑底白字，其他按钮都是灰色，当然清零的按钮c变成了蓝色。当然，如果做的更好看一点的话，=号这部分也可以做成绿色或者蓝色。

3、xaml设计

        xaml的设计，有点类似于网页设计。既然前面已经做出了最终的效果，那么xaml的工作就是要通过脚本编写把这部分内容实现出来。本身gui分成了粗设计和精设计。在xaml这部分，粗设计一般就是grid里面的行设计、列设计。而精设计这部分，一般就是将众多控件当成一个stack横向排列或者纵向排列。至于这个stack占用多少行，多少列，这个就看外面的行和列范围。

<Window x:Class="WpfApp.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:WpfApp"mc:Ignorable="d"Title="Calculator" Height="450" Width="500"><Grid><Grid.RowDefinitions><RowDefinition Height="80"/><RowDefinition/></Grid.RowDefinitions><StackPanel Grid.Row="0" Margin="0,20,0,0"><TextBox Text="0" FontSize="40" Background="White"  Foreground="Black"  Margin="30,0,30,20" BorderThickness="5"  Width="390" Height="60" HorizontalAlignment="Center" HorizontalContentAlignment="Right"/></StackPanel><StackPanel Grid.Row="1" Margin="0,20,0,20"  Orientation="Vertical"><StackPanel Margin="30,0,30,0" Orientation="Horizontal" Width="390" Height="50" HorizontalAlignment="Center" ><Button Background="Blue"  Foreground="White" Content="C" Margin="0,0,0,0" Width="80"/><Button Background="Gray"  Foreground="White" Content=">" Margin="23,0,0,0" Width="80"/><Button Background="Gray"  Foreground="White" Content="%" Margin="23,0,0,0" Width="80"/><Button Background="Gray"  Foreground="White" Content="/" Margin="23,0,0,0" Width="80"/></StackPanel><StackPanel Margin="30,10,30,0" Orientation="Horizontal" Width="390" Height="50" HorizontalAlignment="Center" ><Button Background="Black"  Foreground="White" Content="7" Margin="0,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="8" Margin="23,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="9" Margin="23,0,0,0" Width="80"/><Button Background="Gray"  Foreground="White" Content="*" Margin="23,0,0,0" Width="80"/></StackPanel><StackPanel Margin="30,10,30,0" Orientation="Horizontal" Width="390" Height="50" HorizontalAlignment="Center" ><Button Background="Black"  Foreground="White" Content="4" Margin="0,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="5" Margin="23,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="6" Margin="23,0,0,0" Width="80"/><Button Background="Gray"   Foreground="White" Content="-" Margin="23,0,0,0" Width="80"/></StackPanel><StackPanel Margin="30,10,30,0" Orientation="Horizontal" Width="390" Height="50" HorizontalAlignment="Center" ><Button Background="Black"  Foreground="White" Content="1" Margin="0,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="2" Margin="23,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="3" Margin="23,0,0,0" Width="80"/><Button Background="Gray"  Foreground="White" Content="+" Margin="23,0,0,0" Width="80"/></StackPanel><StackPanel Margin="30,10,30,0" Orientation="Horizontal" Width="390" Height="50" HorizontalAlignment="Center" ><Button Background="Black"  Foreground="White" Content="0" Margin="0,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="00" Margin="23,0,0,0" Width="80"/><Button Background="Black"  Foreground="White" Content="." Margin="23,0,0,0" Width="80"/><Button Background="Gray"   Foreground="White" Content="=" Margin="23,0,0,0" Width="80"/></StackPanel></StackPanel></Grid>
</Window>

        整个代码部分，还是比较容易理解的。首先整个界面的主轴是grid，分成了上下两个部分。每一个行都有一个RowDefinition。接着，在每一行里面，都包含了一个StackPanel。

        第一行的StackPanel比较简单，它本身只包含了一个TextBox控件。

        第二行的Stack则比较复杂一点，因为在StackPanel里面又套了一层StackPanel。相当于20个按钮中，每四个按钮构成一个StackPanel，这样可以生成五个StackPanel。结果生成的五个StackPanel外面又包了一层StackPanel，过程就是这样。

        当然，我们也看到每一个按钮也设定了一些基本属性，比如Background和Foregound、Content这些信息，当然没有里面提到Click部分，主要因为今天主要讲的是设计，代码实现的部分可以后期有时间继续补上。

4、gui布局的精粹

        因为之前学过wxpython、qt，今天又学习了c# wpf的xaml布局，我们发现不管什么样的界面，grid+stack就是最最重要的布局思想。前者属于粗设计，后者属于精设计。掌握了这一点，不管什么样的界面设计，应该都难不倒我们。

        当然，界面设计本身就是很繁琐的工作，这件来来回回的修改一般都是少不了的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/192032.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring Framework详解

Spring Framework详解

学习目标 能够说出Spring的体系结构 能够编写IOC入门案例 能够编写DI入门案例 能够配置setter方式注入属性值 能够配置构造方式注入属性值 能够理解什么是自动装配 一、Spring简介 1 Spring课程介绍 问题导入 我们为什么要学习Spring框架&#xff1f; 1.1 为什么要学 Spri…
阅读更多...
Nat. Mach. Intell. | 预测人工智能的未来：在指数级增长的知识网络中使用基于机器学习的链接预测

Nat. Mach. Intell. | 预测人工智能的未来：在指数级增长的知识网络中使用基于机器学习的链接预测

今天为大家介绍的是来自Mario Krenn团队的一篇论文。一个能够通过从科学文献中获取洞见来建议新的个性化研究方向和想法的工具&#xff0c;可以加速科学的进步。一个可能受益于这种工具的领域是人工智能&#xff08;AI&#xff09;研究&#xff0c;近年来科学出版物的数量呈指数…
阅读更多...
数据结构—两个有序单链表的合并排序算法

数据结构—两个有序单链表的合并排序算法

viod merge(LNode *A,LNode *B){ LNode *C;//新节点 LNode *p C;//辅助指针 while(A->next !null && B->next !null){ if(A->next->data > B->next->data){//A节点大 p->nextA->next;//A元素插入C AA>next; pp->next; }else{ p->…
阅读更多...
如何选择适合的光电传感器与 STM32 微控制器进行接口设计

如何选择适合的光电传感器与 STM32 微控制器进行接口设计

本文介绍了如何选择适合的光电传感器与 STM32 微控制器进行接口设计的方法。首先我们将介绍一些选择光电传感器的关键因素&#xff0c;包括测量范围、响应时间、分辨率和输出类型。然后我们将介绍如何根据所选传感器的特性进行硬件连接和接口设计。最后&#xff0c;我们将提供示…
阅读更多...
机器学习在缺陷检测中的实际效果与应用案例

机器学习在缺陷检测中的实际效果与应用案例

机器学习在缺陷检测中的实际效果与应用案例 机器学习在缺陷检测中的应用已经变得非常广泛&#xff0c;并且在许多行业中都得到了实践验证。通过使用机器学习算法&#xff0c;我们能够训练模型来自动检测产品或过程中的缺陷&#xff0c;从而提高生产效率&#xff0c;降低人工检…
阅读更多...
项目开发维护技术文档（总结梳理）

项目开发维护技术文档（总结梳理）

目录 一、项目背景 二、架构设计 1.技术栈 2.架构图 3.代码结构 三、模块划分 1.用户模块 2.商品模块 四、开发规范 1.命名规范 2.代码格式 3.版本控制 五、部署流程 1.环境要求 2.部署流程 六、问题解决 1.数据库连接异常 2.Redis缓存失效 七、参考资料 项…
阅读更多...
同旺科技 USB TO SPI / I2C --- 调试W5500

同旺科技 USB TO SPI / I2C --- 调试W5500

所需设备&#xff1a; 内附链接 1、USB转SPI_I2C适配器(专业版); 首先&#xff0c;连接W5500模块与同旺科技USB TO SPI / I2C适配器&#xff0c;如下图&#xff1a; 读取重试时间值寄存器&#xff0c;默认值0x07D0 输出结果与默认值一致&#xff0c;芯片基本功能已经调通&am…
阅读更多...
go自定义端口监听停用-------解决端口被占用的问题

go自定义端口监听停用-------解决端口被占用的问题

代码 package mainimport ("fmt""log""net""os/exec""strconv""strings" )func getSelect(beign int, end int) int {var num intfor {_, err : fmt.Scan(&num)if err ! nil {fmt.Println("输入错误&am…
阅读更多...
2、RocketMQ源码分析（二）

2、RocketMQ源码分析（二）

RocketMQ的底层通信模块remoting remoting是RocketMQ的底层通信模块&#xff0c;RocketMQ底层通讯是使用Netty来实现的。本文通过对remoting源码进行分析&#xff0c;来说明remoting如何实现高性能通信的。 二、Remoting 通信模块结构 remoting 的网络通信是基于 Netty 实现&…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《市场环境下运行的光热电站子系统容量优化配比研究》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《市场环境下运行的光热电站子系统容量优化配比研究》

这个标题涉及到对市场环境下运行的光热电站子系统进行容量优化配比的研究。让我们逐步解读&#xff1a; 市场环境下运行的光热电站&#xff1a; 这指的是光热电站在实际市场环境中的运行&#xff0c;可能包括了市场相关的经济、政策、竞争等因素。 子系统&#xff1a; 光热电站…
阅读更多...
十六进制数列求和

十六进制数列求和

高精度数组的集大成 做的时候在和高中同学叙叙旧&#xff0c;差点寄掉 代码如下&#xff1a; #include<stdio.h> void expand(int len); const char hexadecimal[17] "0123456789ABCDEF"; int result[20], mid[20], l_result[100];int main(void) {char tm…
阅读更多...
你好！二分查找【JAVA】

你好！二分查找【JAVA】

1.初次相识 二分查找又称折半查找&#xff0c;是一种在有序数组中查找特定元素的算法。二分查找的基本思想是&#xff1a;通过不断地二分数组的中间元素&#xff0c;缩小查找区间&#xff0c;直到找到目标元素或者确定目标元素不存在为止。 二分查找的时间复杂度为O(logn)&…
阅读更多...
docker配置redis主从、哨兵集群

docker配置redis主从、哨兵集群

搭建redis主从 准备工作 在/usr/local/software/redis/文件夹下建立如下的文件夹、文件 rootlocalhost redis]# mkdir -p 6379/conf 6379/data 6379/log [rootlocalhost redis]# mkdir -p 6380/conf 6380/data 6380/log [rootlocalhost redis]# mkdir -p 6381/conf 6381/…
阅读更多...
Kubernetes集群部署—部署Worker节点（四）

Kubernetes集群部署—部署Worker节点（四）

文章目录 1、创建工作目录并拷贝二进制文件2 部署kubelet &#xff08;master节点操作&#xff09;2.1 创建配置文件2.2 配置参数文件2.3 生成bootstrap.kubeconfig文件2.4 systemd管理kubelet2.5 启动并设置开机启动 3 批准kubelet证书申请并加入集群4 部署kube-proxy &#x…
阅读更多...
如何创建一个vue工程

如何创建一个vue工程

1.打开vue安装网址&#xff1a;安装 | Vue CLI (vuejs.org) 2.创建一个项目文件夹 3.复制地址 4.打开cmd&#xff0c;进入这个地址 5.复制粘贴vue网页的安装命令 npm install -g vue/cli 6.创建vue工程 vue create vue这里可以通过上下键来进行选择。选最后一个选项按回车。 …
阅读更多...
根文件系统构建-编译busybox

根文件系统构建-编译busybox

一. 简介 本文对 busybox进行编译。 本文继上一篇busybox配置&#xff0c;地址如下&#xff1a; 根文件系统构建-对busybox进行配置-CSDN博客 二. 根文件系统构建-编译busybox源码 1. 修改 Makefile&#xff0c;添加编译器 同 Uboot 和 Linux 移植一样&#xff0c;打开…
阅读更多...
制作一个RISC-V的操作系统-环境搭建

制作一个RISC-V的操作系统-环境搭建

文章目录 前言环境搭配 前言 由于之前的操作系统反馈难度太大&#xff0c;所以准备从这个RISC-V操作系统出发&#xff0c;以后知识层面更加深入再去完善。 环境搭配 按照依赖项 $ sudo apt update $ sudo apt install build-essential gcc make perl dkms git gcc-riscv64-…
阅读更多...
装箱 Box 数据类型

装箱 Box 数据类型

装箱是最简单直接的一种智能指针&#xff0c;它的类型是Box<T>。装箱使我们可以把数据存储到堆上&#xff0c;并在栈上保留一个指向堆数据的指针。装箱操作常常被用于下面的场景&#xff1a; 当你拥有一个无法在编译时确定大小的类型&#xff0c;但又想使用这个类型的值…
阅读更多...
决策 Diffie-Hellman DDH 和 CDH

决策 Diffie-Hellman DDH 和 CDH

密码学中的 Diffie-Hellman 问题有几种变体&#xff1a;计算问题 (CDH) 和决策问题 (DDH)。这篇文章将解释两者&#xff0c;并举例说明前者如何困难而后者如何简单。 迪菲-赫尔曼问题 Diffie-Hellman 问题是针对阿贝尔群制定的。我们想到的主要群是非零整数以大素数 p为模的乘…
阅读更多...
WordPress（安装比子主题文件）zibll-7.5.1

WordPress（安装比子主题文件）zibll-7.5.1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、新建网站二、配置ssl三.配置伪静态四.上传文件五.添加本地访问前言 提示：这里可以添加本文要记录的大概内容： 首先，我们要先理解什么是授权原理。 原理就是我们大家运营网站，点击授权…
阅读更多...
最新文章

Copyright @ 2022~2023