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;近年来科学出版物的数量呈指数…
阅读更多...
如何选择适合的光电传感器与 STM32 微控制器进行接口设计

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

本文介绍了如何选择适合的光电传感器与 STM32 微控制器进行接口设计的方法。首先我们将介绍一些选择光电传感器的关键因素&#xff0c;包括测量范围、响应时间、分辨率和输出类型。然后我们将介绍如何根据所选传感器的特性进行硬件连接和接口设计。最后&#xff0c;我们将提供示…
阅读更多...
同旺科技 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/…
阅读更多...
如何创建一个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这里可以通过上下键来进行选择。选最后一个选项按回车。 …
阅读更多...
制作一个RISC-V的操作系统-环境搭建

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

文章目录 前言环境搭配 前言 由于之前的操作系统反馈难度太大&#xff0c;所以准备从这个RISC-V操作系统出发&#xff0c;以后知识层面更加深入再去完善。 环境搭配 按照依赖项 $ sudo apt update $ sudo apt install build-essential gcc make perl dkms git gcc-riscv64-…
阅读更多...
三轴加速度计LIS2DW12开发(2)----基于中断信号获取加速度数据

三轴加速度计LIS2DW12开发(2)----基于中断信号获取加速度数据

三轴加速度计LIS2DW12开发.2--轮基于中断信号获取加速度数据 概述视频教学样品申请生成STM32CUBEMX串口配置IIC配置CS和SA0设置INT1设置串口重定向参考程序初始换管脚获取ID复位操作BDU设置开启INT1中断设置传感器的量程配置过滤器链配置电源模式设置输出数据速率中断判断加速…
阅读更多...
Mac卸载、安装Python

Mac卸载、安装Python

卸载 说明 对于删除 Python&#xff0c;我们首先要知道其具体都安装了什么&#xff0c;实际上&#xff0c;在安装 Python 时&#xff0c;其自动生成&#xff1a; Python framework&#xff0c;即 Python 框架&#xff1b;Python 应用目录&#xff1b;指向 Python 的连接。 …
阅读更多...
mazing是什么软件?为什么选择iMazing

mazing是什么软件?为什么选择iMazing

说起iOS设备管理工具&#xff0c;可能大家还有点陌生&#xff0c;其实就是Apple公司开发的移动设备&#xff0c;因其的操作系统是独特的iOS系统&#xff0c;所以又叫iOS设备。比如大家都在用的iPhone手机&#xff0c;就是这样类型的一个设备。 mazing是什么软件? iMazing是一…
阅读更多...
【Linux】Ubuntu添加root用户

【Linux】Ubuntu添加root用户

在Ubuntu中&#xff0c;默认情况下是禁用了root用户的登录。如果仍然想要启用root用户&#xff0c;并设置root用户的密码&#xff0c;应按照以下步骤进行操作&#xff1a; 一、输入sudo passwd root设置root用户密码 二、切换root用户 sudo -i su root 这两条命令均可却换至…
阅读更多...
前端入门（四）Ajax、Promise异步、Axios通信、vue-router路由、组件库

前端入门（四）Ajax、Promise异步、Axios通信、vue-router路由、组件库

文章目录 AjaxAjax特点 Promise 异步编程&#xff08;缺&#xff09;Promise基本使用状态 - PromiseState结果 - PromiseResult AxiosVue中使用AxiosAxios请求方式getpostput和patchdelete并发请求 Vue路由 - vue-router单页面Web应用&#xff08;single page web application&…
阅读更多...
Android HCI日志分析案例2

Android HCI日志分析案例2

案例1--蓝牙音箱电量用完后&#xff0c;配对一直失败&#xff0c;提示PIN码不正确 基于MTK平台&#xff0c;通过MTKLogger开启保存HCI日志 问题定位分析 Android日志查看logcat 搜索到关键log 01-20 10:07:55.403760 978 1075 V bt_stack: [VERBOSE2:btm_inq.cc(2032)] …
阅读更多...
Stream

Stream

什么是Stream&#xff1f; 也叫Stream流&#xff0c;是jdk8开始新增的一套API&#xff0c;可以用来操作集合或者数组的数据 优势&#xff1a;Stream流大量的结合了Lambda的语法风格来编程&#xff0c;提供了一种更加强大&#xff0c;更加简单的方式操作集合或数组中的数据&am…
阅读更多...
详解Spring工厂是如何获取Aop中的代理对象的

详解Spring工厂是如何获取Aop中的代理对象的

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023