当前位置: 首页 > news >正文

C# WPF入门学习(四)—— 按钮控件

上期介绍了WPF的实现架构和原理,之后我们开始来使用WPF来学习各种控件。

一、尝试插入一个按钮(方法一)

1. VS2019 在界面中,点击工具栏中的视图,在下拉菜单中选择工具箱。

至于编译器中的视图怎么舒服怎么来布置,我也会出一期文章讲述我的编译器界面如何布局的,新手和强迫症到时候可以来参考参考。

2. 言归正传,打开工具箱界面之后,我们找到button按键控件,拖入进来。

这样,一个按键就创建好了,但是如何才能修改属性变成左下角的按键的样式呢?那就需要修改XAML了

XAML 是一种强大且灵活的标记语言,适用于创建现代化、响应迅速的 Windows 应用程序界面。它的声明式语法和与 C# 的紧密集成,使其成为 WPF 和 UWP 开发的核心工具。通过学习 XAML,开发者可以更高效地设计和实现复杂的 UI 需求。

二、在XAML中插入一个button(方法二)

在可视化UI下面有一个xaml代码编辑器,在编辑器中可以更改代码和增删代码来改变布局,红框就是XAML代码编辑区。


XAML格式和内容编辑:

1. XAML中的Window元素

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525">
</Window>

<Window> 元素是 WPF 中一个顶级容器,表示一个窗口。它通常是一个应用程序的主窗口或弹出窗口。这个元素包含了一些属性,用于定义窗口的外观和行为。

x:Class: 是一个 XAML 语言的特性,指定了这个 XAML 文件所对应的后台代码类。在例子中,x:Class="WpfApp.MainWindow" 指定了窗口的后台代码类是 WpfApp.MainWindow。这个类位于 MainWindow.xaml.cs 文件中,并包含窗口的逻辑代码。

xmlns: 定义了 XAML 文件中使用的命名空间。xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation":这是默认的 WPF 命名空间,包含了 WPF 中的各种控件和功能。

xmlns:x: 定义了 XAML 的命名空间,包含 XAML 语言的功能。xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml":这是 XAML 命名空间,提供了如 x:Classx:Namex:Key 等 XAML 语言功能。

Title: 定义窗口的标题栏文本。Title="MainWindow" 将窗口的标题设置为 "MainWindow"。

HeightWidth: 定义窗口的高度和宽度(以像素为单位)。Height="350"Width="525" 设置了窗口的初始大小。

这是完整的一个窗口的界面描述代码。

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><!-- 这里可以添加更多的控件和布局 --><Grid><Button Content="Click Me" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"Click="Button_Click"/></Grid>
</Window>

2. XAML中的Grid元素

<Grid><Button Content="Button" HorizontalAlignment="Left" Margin="366,99,0,0" VerticalAlignment="Top" Width="99" Height="38"/><Button Content="XAML创建的按钮" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="30"></Button>
</Grid>

3. Button元素

当我们会创建一个按钮元素之后,在侧边的属性栏中可以改文字、颜色、背景等属性。那么如果圆角这种没有的属性如何更改和美化呢(毕竟做出来是给人看的)?直接粘代码:

<Button x:Name="myButton" Content="Click Me"Width="104" Height="69"HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16" FontWeight="Bold"Background="LightBlue" Foreground="White"BorderBrush="Blue" BorderThickness="2"Click="MyButton_Click" Margin="18,230,399,25"><Button.Style><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SkyBlue"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SteelBlue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button>

像上面的代码实现的效果是什么样的呢?

x:Name="myButton"          <!-- 设置按钮的名称为myButton,便于在代码后端引用 -->Content="Click Me"         <!-- 按钮上显示的文字内容 -->Width="104" Height="69"     <!-- 设置按钮的宽度和高度 -->HorizontalAlignment="Center" VerticalAlignment="Center"  <!-- 让按钮在容器中水平和垂直居中对齐 -->FontSize="16" FontWeight="Bold"   <!-- 设置按钮文字的字体大小和加粗 -->Background="LightBlue" Foreground="White"  <!-- 按钮的背景色为浅蓝色,前景色(文字颜色)为白色 -->BorderBrush="Blue" BorderThickness="2"      <!-- 设置按钮边框颜色为蓝色,边框厚度为2 -->Click="MyButton_Click"             <!-- 指定按钮被点击时执行的事件处理方法 -->Margin="18,230,399,25">           <!-- 设置按钮的外边距,顺序为左、上、右、下 -->
  <!-- 自定义Button的样式 --><Button.Style><Style TargetType="Button"> <!-- 定义一个针对Button类型的样式 --><!-- 重写Button的控制模板 --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><!-- 使用Grid布局来包含按钮的内容 --><Grid><!-- 创建一个椭圆用于自定义按钮的背景形状 --><Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" <!-- 绑定到按钮背景色属性 -->Stroke="{TemplateBinding BorderBrush}" <!-- 绑定到按钮边框色属性 -->StrokeThickness="{TemplateBinding BorderThickness}"/> <!-- 绑定到按钮边框厚度属性 --><!-- 内容展示器,用于放置按钮上的内容(如文本) --><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid><!-- 添加触发器来改变按钮状态时的外观 --><ControlTemplate.Triggers><!-- 鼠标悬停时改变椭圆背景色 --><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SkyBlue"/></Trigger><!-- 按钮被按下时改变椭圆背景色 --><Trigger Property="IsPressed" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SteelBlue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Button.Style>

这些就是代码的详细解释了。

总结一下:

了解如何在WPF应用程序中实现按钮的创建与自定义,通过Visual Studio 2019的图形界面操作及深入XAML代码编辑,展示了按钮控件的基本应用与进阶样式调整技巧。也介绍了如何从工具箱中添加一个按钮,和手动写代码放置一个按钮。介绍了自定义按钮的代码实现。

相关文章:

C# WPF入门学习(四)—— 按钮控件

上期介绍了WPF的实现架构和原理&#xff0c;之后我们开始来使用WPF来学习各种控件。 一、尝试插入一个按钮&#xff08;方法一&#xff09; 1. VS2019 在界面中&#xff0c;点击工具栏中的视图&#xff0c;在下拉菜单中选择工具箱。 至于编译器中的视图怎么舒服怎么来布置&am…...

大模型效能工具之智能CommitMessage

01 背景 随着大型语言模型的迅猛增长&#xff0c;各种模型在各个领域的应用如雨后春笋般迅速涌现。在研发全流程的效能方面&#xff0c;也出现了一系列贯穿全流程的提效和质量工具&#xff0c;比如针对成本较高的Oncall&#xff0c;首先出现了高质量的RAG助手&#xff1b;在开…...

PyQt6--Python桌面开发(33.QToolBar工具栏控件)

QToolBar工具栏控件...

node环境问题(无法加载文件D:\Software\Node.js\node_global\vue.ps1,因为在此系统上禁止运行脚本。)

问题&#xff1a;npm安装lerna显示安装成功&#xff0c;但是lerna -v的时候报错 解决步骤&#xff1a; 1、输入&#xff1a;Get-ExecutionPolicy 2、输入&#xff1a;Set-ExecutionPolicy -Scope CurrentUser&#xff08;有选项的选Y&#xff09; 3、输入&#xff1a;RemoteSi…...

位运算算法

位运算是计算机中常用的一种运算方法&#xff0c;它直接对二进制数的位进行操作。位运算主要包括按位与&#xff08;&&#xff09;、按位或&#xff08;|&#xff09;、按位异或&#xff08;^&#xff09;、按位取反&#xff08;~&#xff09;、左移&#xff08;<<&a…...

重学java 45.多线程 下 总结 定时器_Timer

人开始反向思考 —— 24.5.26 定时器_Timer 1.概述:定时器 2.构造: Timer() 3.方法: void schedule(TimerTask task, Date firstTime, long period) task:抽象类,是Runnable的实现类 firstTime:从什么时间开始执行 period:每隔多长时间执行一次…...

MongoDB(介绍,安装,操作,Springboot整合MonggoDB)

目录 MongoDB 1 MongoDB介绍 MongoDB简介 MongoDB的特点 MongoDB使用场景 小结 2 MongoDB安装 安装MongoDB 连接MongoDB MongoDB逻辑结构 MongoDB数据类型 小结 3 MongoDB操作 操作库和集合 操作文档-增删改 操作文档-查询 MongoDB索引 小结 4 SpringBoot整合…...

【数字移动通信】期末突击

文章目录 复习题一.简答题1、常用的移动通信系统有哪些?2、分别列出1G,2G,3G,4G的典型系统或标准&#xff1f;3、移动通信信道的基本特征&#xff1f;4、电波传播预测模型是用来计算什么量的&#xff0c;在选择传播预测模型时&#xff0c;主要考虑哪些因素&#xff1f;5、什么…...

数据库(5)——DDL 表操作

表查询 先要进入到某一个数据库中才可使用这些指令。 SHOW TABLES; 可查询当前数据库中所有的表。 表创建 CREATE TABLE 表名( 字段1 类型 [COMMENT 字段1注释] ...... 字段n 类型 [COMMENT 字段n注释] )[COMMENT 表注释]; 例如&#xff0c;在student数据库里创建一张studen…...

【Java EE】网络协议——HTTP协议

目录 1.HTTP 1.1HTTP是什么 1.2理解“应用层协议” 1.3理解HTTP协议的工作过程 2.HTTP协议格式 2.1抓包工具的使用 2.2抓包工具的原理 2.3抓包结果 3.协议格式总结 1.HTTP 1.1HTTP是什么 HTTP&#xff08;全称为“超文本传输协议”&#xff09;是一种应用非常广泛的应…...

Docker提示某网络不存在如何解决,添加完网络之后如何删除?

Docker提示某网络不存在如何解决&#xff1f; 创建 Docker 网络 假设现在需要创建一个名为my-mysql-network的网络 docker network create my-mysql-network运行容器 创建网络之后&#xff0c;再运行 mysqld_exporter 容器。完整命令如下&#xff1a; docker run -d -p 9104…...

C++ 红黑树

目录 1.红黑树的概念 2.红黑树的性质 3.红黑树节点的定义 4.红黑树的插入操作 5.数据测试 1.红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个…...

PTA 6-4 配对问题

许多大学生报名参与大运会志愿者工作。其中运动场引导员需要男女生组队&#xff0c;每组一名男生加一名女生&#xff0c;男生和女生各自排成一队&#xff0c;依次从男队和女队队头各出一人配成小组&#xff0c;若两队初始人数不同&#xff0c;则较长那一队未配对者调到其他志愿…...

sklearn基础教程

scikit-learn是一个用于机器学习的Python库&#xff0c;提供了多种机器学习的方法和模型&#xff0c;以及数据预处理、特征选择、模型评估等功能。它简化了机器学习流程&#xff0c;并且具有易于使用和灵活的特点。 本教程将介绍sklearn的基础知识和常用功能&#xff0c;帮助你…...

MySQL入门学习-查询进阶.别名

别名&#xff08;Alias&#xff09;是为数据库中的表、列或表达式赋予的一个临时名称。使用别名可以使查询结果更具可读性&#xff0c;并且在复杂的查询中更方便地引用和处理数据。 在 MySQL 中&#xff0c;别名可以通过 AS 关键字来定义&#xff0c;例如&#xff1a; SELECT…...

【Rust日报】嵌入式 Rust:一份简化指南

EvilHelix 编辑器 EvilHelix 是一个采用 Vim 风格的模态编辑器&#xff0c;旨在提供快速且高效的编辑体验。它是 Helix 编辑器的一个分支&#xff0c;增加了 Vim binding&#xff0c;同时积极同步上游的特性&#xff0c;兼备了 Vim 和 Hexli 的优点&#xff1a; Vim 风格的模态…...

Web课外练习9

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>邮购商品业务</title><!-- 引入vue.js --><script src"./js/vue.global.js" type"text/javascript"></script><link rel&…...

rtsp协议分析

rtsp (real-time stream protocol)实时流媒体控制协议 属于基于文本的应用层协议&#xff0c;rtsp的底层协议可以是udp也可以是tcp ffmpeg 参数-rtsp_transport tcp 用于指定RTSP会话底层传输协议为TCP 本身并不传输流媒体数据&#xff0c;只是提供流媒体的控制&#xff0c;实…...

Spring Web MVC(2)

响应 Http响应的结果可以是数据也可以是静态页面可以针对响应设置状态码 Header信息 返回静态页面注解RestController和Controller 我们创建一个前端页面 package com.example.demo.demos.web.controller;import org.springframework.web.bind.annotation.RequestMapping; i…...

Python-图片旋转360,保存对应图片

#Author &#xff1a;susocool #Creattime:2024/5/25 #FileName:turn360 #Description: 会旋转指定的图像文件360度&#xff0c;并将每个旋转后的图像保存到指定目录&#xff0c;文件名以旋转角度命名。 from PIL import Imagedef rotate_and_save(image_path, output_dir) :# …...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...