UWP 开发初阶 Chapter 6 - 简单介绍如何使用 C# 改变 XAML 控件的属性
上篇回顾
上篇介绍了通过 this.Frame.navigate(typeof(PageName));
实现的全局页面导航,以及通过在 XAML 中建立 Frame
,并通过 frameName.navigate(typeof(PageName));
实现的局部页面导航。
本篇正文
本篇将讲述如何通过 C# 设置或改变 XAML 中控件的属性。例如常用的 TextBlock
等等。
回顾一下:
先前的文章已经涉及到
Name
这个属性,给一个 XAML 控件取了个名字过后,我们就可以在.xaml.cs
文件中引用它啦!这样也就可以改变了它的一些相关属性。
我们先为我们接下来的任务,做一些基础,把基本的东西写入 .xaml
,我们接下来要通过按钮点击,来改变一个 TextBlock
的各种属性。
下面,大家自己动手。在一个空白
MainPage.xaml
里的Grid
里面写一个StackPanel
,而StackPanel
里面先放一个TextBlock
。代码如下:<Grid><StackPanel><TextBlock Name="myTextBlock"/></StackPanel> </Grid> 复制代码
好了,准备工作完成了,我们的 TextBlock
都只给它一个名字,其他我们通过 C# 来实现!
注意:以下为了课程方便,未给 Button
设置名字,正式开发中,请养成给他们取易于区分的名字的好习惯
任务一:通过点击按钮,在
TextBlock
里面显示 “Hello, world!”我们先在
StackPanel
里面加一个按钮,同时新建一个点击事件,代码如下:<Button Content="Click to show text" Click="Button_Click"/> 复制代码
然后,找到 vs 帮你新建的事件,在里面写如下代码:
提示:将光标移到新建的事件的名字上,按
F12
可以快速跳转至事件定义。myTextBlock.Text = "Hello, world!"; 复制代码
解释:
myTextBlock
就是我们之前在.xaml
文件中定义的一个控件,而myTextBlock.Text
就是这个控件里面的文字,这个属性的类型为string
。好了!第一个任务完成了,我们先慢点编译,继续做下一个任务。
任务二:通过点击按钮,改变
TextBlock
里面的文字我们先依旧在
StackPanel
里面新建一个按钮,代码如下:<Button Content="Click to change text" Click="Button_Click_1"/> 复制代码
然后转到新建事件,写如下代码:
myTextBlock.Text = "This is UWP Development Tutorial!"; 复制代码
这时候我们就将
TextBlock
里面的文字改为新的文字了!我们再进行下一步。
任务三:通过点击按钮,改变
TextBlock
里面文字的颜色依旧新建一个按钮,XAML 代码就不再赘述了,一个思路。
然后转到新建的事件里面,写如下代码:
myTextBlock.Foreground = new SolidColorBrush(Colors.Red); 复制代码
**解释:**大家应该还记得,
Foreground
表示的是TextBlock
里面字的颜色,而这个Foreground
属性的类型为Brush
,因此我们需要新建一个SolidColorBrush
,而后面的括号里面的Colors
就是我们在 XAML 中编写Foreground
的时候那一串颜色。(注意:Colors
需要using Windows.UI
)。**补充:**其实
SolidColorBrush
只是众多Brush
中的一种。还有LinearGradientBrush
,也就是我们熟知的渐变色。还有AcrylicBrush
,这也就是微软先前发布的 Fluent Design 中的一个重要元素,亚克力!这时候,补充一点,大家上手的话会发现,
Colors
里面的颜色都是一些微软帮你设定好的,而你却想通过 RGB 来设定颜色,这时候你可以通过这行代码。myTextBlock.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); 复制代码
注意:这里面是
Color
而不是Colors
,同时FromArgb
后的括号里面,有四个变量,其实有一定编程基础的朋友大概都能猜到,第一个 A 值便是透明度,而不同于 Java 中的阿尔法值区间是 0 - 1,这个 A 的值的区间是 0 - 255,其中值越小,越透明。而剩下的依次为 R、G、B颜色的变化也完成啦!下一步!
任务四:通过点击按钮改变字体大小
依旧新建一个按钮啦!
然后在 csharp 文件中的事件定义处,写下如下代码:
myTextBlock.FontSize = 30; 复制代码
解释:
FontSize
的这个属性的类型为double
,因此这步操作很简单。补充个知识,如果你不去设置FontSize
,那默认是 15,所以这里面我们相当于把字变大了。好了!下一步!
任务五:通过点击按钮,加粗字体
新建按钮!
然后找到找到事件定义:
myTextBlock.FontWeight = FontWeights.Bold; 复制代码
解释:
.FontWeight
里面就是使得字体加粗,或者变细等等,而注意赋值号右边是FontWeights
,而不是FontWeight
,其中FontWeights
需要using Windows.UI.Text
。好啦!
好啦!今天的任务就暂告一个段落!快去编译试试看吧!效果如下:
结语
其实我们今天讲的只是冰山一角,但凡是这个控件有的属性,我们都可以通过 C# 进行更改,只不过可能有时候会比较繁琐,如果大家愿意,可以自己去 vs 上试一试其他的属性是怎么更改的,不明白的也可以随时问我,或在下方留言!下次的内容我还没想好嘿嘿,可能还会介绍一部分控件。
那大家好好复习!
下篇见!
UWP 开发初阶 Chapter 6 - 简单介绍如何使用 C# 改变 XAML 控件的属性相关推荐
- Eclipse开发初阶之Eclipse安装
在Eclipse的官方网站([url]www.eclipse.org[/url])下载安装文件,本人习惯用Eclipse3.2.1,文件名为eclipse-SDK-3.2.1-win32.zip(一定 ...
- Eclipse开发初阶之Eclipse多国语言包安装
Eclipse开发初阶之Eclipse多国语言包安装 2008-02-01 13:07:13 <!--showHead end--> 标签:Eclipse 开发 多国语言包 Java 安装 ...
- SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性
深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第 ...
- SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能
本教程的上一个步骤,我们学习了如何基于 OData V4 开发一个最简单的使用了 Table(表格)控件的 SAP UI5 应用. SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 ...
- Android 开发 -- 开发第一个安卓程序、Android UI开发(布局的创建:相对布局和线性布局、控件单位:px pt dp sp、常用控件 、常见对话框、ListView)
文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...
- SAP UI5 应用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何实现创建,编辑和保存功能
本教程前几个步骤,我们已经用 SAP UI5 table 控件开发了一个包含 User 列表的应用,并且支持了根据 LastName 字段进行查询,以及排序的操作. SAP UI5 应用开发教程之六十 ...
最新文章
- Blender+Substance Painter全流程制作真实的机器人学习教程
- 首席信息官利用AI提升自身地位的三种方法
- c#中string字符串转为json与json转对象
- lua学习笔记之函数
- asp.net中@page指令的属性Inherits、Src、CodeBehind区别
- Vue.js 事件处理
- 如何设置网件gs108e_Netgear 网件 EAX80 AX6000规格 无线扩展器 开箱拆解评测
- 多重选定怎么撤销_多重网络问题怎么解决?如何取消多重网络?
- 不知道选择多云还是混合云?先把概念弄清楚吧
- Day4 MySql触发器视图索引以及设计优化
- IDEA/Eclipse安装 Alibaba Java Coding Guidelines 插件
- Drools规则引擎的基本使用
- SM2258XT固态硬盘不认盘量产修复开卡工具 SM2258XT开卡教程
- 使用Java轻松破解顶象滑动拼图验证码,成功率接近100%?
- unity中三种数据存储方式ScriptableObject,Json,Xml和Dictionary的序列化
- Google guava之BiMap简介说明
- 支付宝异步通知 asp
- 融资融券是对A股明显利好
- Mac air苹果笔记本安装Win10双系统教程(绝对能成功,超详细!)[转]
- C++中volatile变量测试