UWP学习记录4-设计和UI之控件和模式1

UWP学习记录4-设计和UI之控件和模式1

1、控件和事件简介

在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素。 控件是用户界面的构建基块。 我们提供了超过 45 种控件供你使用,范围从简单按钮到网格视图之类的功能强大的数据控件。 模式是合并多个控件来创造新内容的一种方式。

应用添加控件实现UI,主要是三个步骤:

A、将控件添加到你的应用 UI。

B、设置控件的属性,如宽度、高度或前景色。

C、将代码添加到控件的事件处理程序,从而使其执行一些任务。

添加应用一般通过:

A.1 使用像Blend之类的设计工具;

A.2 使用vs的XAML编辑器;

A.3 使用代码来创建控件。

接下来,通过设置x:Name 属性来给控件命名,同时,还可以设置控件的各种属性。最后,可以对控件的各种事件做响应。

当然,如果用了MVVM,那么控件的属性和事件的绑定,会有些不同。

2、按功能分类控件

MS提供了一份开源代码,之前也提到过。编完运行效果如下:

这个demo,也正好是对应着MSDN的文档的。文档里系统的列举了UWP的各种控件,有按名字排序的,也有按功能分类排序的。自然是按功能的更适合学习,它列举的分类如下:

应用栏和命令

按钮

集合/数据控件

日期和时间控件

浮出控件

图像

图形和墨迹

布局控件

媒体控件

导航

进度控件

文本控件

选择控件

非常蛋疼的是,MSDN的按功能分类控件列表,按名称的列表,以及demo里的控件列表,这三者稍微有点对不上。不过也不太重要,后面会一种种的控件去实验,这样才能做到开发app时,能自然的选用最合适的控件。

时间: 2024-12-25 05:02:23

UWP学习记录4-设计和UI之控件和模式1的相关文章

UWP学习记录7-设计和UI之控件和模式4

UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中进行浏览. 对于鼠标,导航按钮显示在鼠标悬停位置上. 对于键盘,使用箭头键移动浏览该集合. 翻转视图最适合浏览小到中型集合中的图像(最多 25 个项目左右). 此类集合的示例包括产品详细信息页中的项目或相册中的照片. 虽然微软不建议将翻转视图用于大多数大型集合,但是该控件通用于查看相册中的个别图像.

UWP学习记录9-设计和UI之控件和模式6

UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象,例如椭圆.矩形.直线.贝塞尔曲线等,Path 是最通用的 Shape,因为使用它可以定义任意几何图形.图形这块,是和wpf一样的. 2.布局控件 布局控件这块,大体上也是和wpf一样的.布局控件包含边框(Border).画布(Canvas).网格(Grid).RelativePanel.Stack

UWP学习记录10-设计和UI之控件和模式7

UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. 中心的内容可以显示在全景视图中,这样用户一眼就能看见新增内容.可用功能和相关信息. 中心通常具有一个页标题,每个内容部分各有一个部分标题. Pivot,透视表控件,用于导航经常访问的不同内容类别. 透视表允许在两个或多个内容窗格之间进行导航,并且依靠文本标题来表明内容的不同部分. SemanticZ

UWP学习记录2-设计和UI之布局

UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者导航窗(nav)来作为导航元素实现导航跳转.而对于层次关系,则使用中心(hub)来提供子页面的预览或摘要,或者使用大纲(master-details)来实现导航. 除此之外,返回(后退)和链接也可以用来导航.启用系统后退导航支持的方法是注册 BackRequested 事件的侦听器.标题栏后退按钮的

UWP学习记录3-设计和UI之样式

UWP学习记录3-设计和UI之样式 1.颜色 在系统的“设置”>“个性化”>“颜色”里,提供了主题色选择.选定主题色后,会根据颜色亮度的 HSB 值创建浅色和深色的主题色. 应用可使用阴影变量创建可视化层次结构和提供交互指示.在 XAML 中,主要主题色显示为名为 SystemAccentColor 的主题资源. 这些色调可用作 SystemAccentColorLight3.SystemAccentColorLight2.SystemAccentColorLight1.SystemAccen

Qt编程之UI与控件布局

当然,大家都知道UI界面可以用Qt Designer在约束环境下设置编辑.ui文件,再将.ui文件转换成对应的ui_XXX.h文件,这头文件中的内容是:用C++语言实现真正的界面布局.uic -o "outputfile" "inputfile.ui"命令行可以转换 当然,也可以自己用C++来实现界面布局利用成员函数SetGeometry什么的,但是那样的开发效率就下降了,BUG概率引入的也会加大. 这篇文章很好的演示了只利用C++实现的界面设计布局: http:/

推荐几款基于HTML5的优秀UI开发控件

UI开发控件很多,当需要满足跨平台的需求时,目前比较火爆的是HTML5技术,小编在这里给工程师们推荐几款评价较好的几款控件,希望能够帮助到大家.      控件一:Essential Studio for JavaScript 概述:essential studio是首款专门用于LOB应用开发的JavaScript框架.包含40多种独特的.全新设计的控件,包括网格.图表.计量器.编辑器.树形视图.菜单.OLAP网格等等. 特点: 1.基于最新的HTML5技术的UI开发控件: 2.包括多种类型的子

html学习第一讲(内容html常规控件的的使用)

1 <html> 2 <head> 3 <title> 这是网页的标题</title> 4 </head> 5 6 <body> 7 <h2><font color ="blue"> 这是网页的内容!</font></h2> 8 9 <a href="http://www.cnblogs.com/gongxijun">这是一个连接<

自定义的jquery ui树控件

简单的自定义jquery ui树控件,用于机构人员,支持自动加载下级节点数据 jQuery.widget("xway.Tree", { _Node: function(data) { this.id = data.type + "_" +data.id; this.trid = "tr_" + this.id; this.label = data.label; this.parent = null; this.tree = null; this.