Xamarin.Forms 第07局:显示型控件

总目录


前言

本文介绍控件:
一、控件概述
二、Label
三、Image
四、BoxView
五、WebView

环境

1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定:XF代表Xamarin.Forms

内容

一、控件概述

控件(Control)是构建界面的基础元素,通常有以下几种类型:

1.显示型控件:
Label:显示文本,可单行或多行显示;
Image:显示图像;
BoxView:显示矩形;
WebView:显示Web和Html内容;

2.命令型控件
Button:可触发点击事件;
ImageButton:带图片的Button,可触发点击事件;
SearchBar:搜索条,可提供用户搜索功能;

3.设置型控件
Slider:滑动条;
Stepper:步进器;
Switch:开关;
DatePicker:日期选择器;
TimePicker:时间选择器;

4.编辑型控件
Entry:文本框,输入或编辑单行文本;
Editor:编辑器,输入或编辑多行文本;

5.状态型控件
ActivityIndicator:活动指示器,一个转圈圈动画的控件;
ProgressBar:进度条;

6.集合型控件
Picker:选取器,提供一个供选择的列表;
ListView:集合列表;
TableView:表控件,它允许每行显示不同模板的内容,而ListView所有行的模板相同。

显示型控件

二、Label

Label:显示文本,可以调整文本样式。

实现效果
Xaml方式

1.TextDecorations:文本修饰,其属性值为:
- None:无修饰(默认值);
- Underline:下划线;
- Strikethrough:删除线。

2.FontSize:字体大小,可设置固定值。也可以使用XF内置属性值,XF会根据不同平台选择最佳大小:
- Default:默认;
- Micro:微小;
- Small:小;
- Medium:中;
- Large:大;

3.FontAttributes:字体样式,其属性值为:
- None:无(默认值);
- Bold:粗体;
- Italic:斜体;

4.TextColor:设置字体颜色。
- 16 进制,例如:"#000000";
- 系统内置,例如:"Orange"

5.LineBreakMode:行截断模式,其属性值为:
- NoWrap:不换行;
- WordWrap:按单词换行(默认值);
- CharacterWrap:按字符换行;
- HeadTruncation:断头,即:显示尾部,头部显示省略号...;
- TailTruncation:断尾,即:显示头部,尾部显示省略号...;
- MiddleTruncation:断中间,即:显示头尾内容,中间显示省略号...。

6.MaxLines:设置可以显示的最行数。

7.FormattedText:格式化文本,由多个Span组成。

C#方式

三、Image

Image:显示图片。

注:需要在不同平台不同分辨率下分别放置图片,本例以Android为例,有以下图片:

实现效果
Xaml

Image有以下重要属性:

1.Source:图片来源,来源有以下几种:

  • File:资源文件,如本例所示;
  • Uri:网络,例如:Source = "https://server.com/img.jpg";
  • Resource:嵌入到应用或类库中的文件,需将图片的生成操作设为:EmbeddedResource;
  • Stream:来自图像流;

2.Aspect:图片显示方式,即,如何调整图片的显示,有以下属性值:

  • AspectFit:自适应(默认值);
  • AspectFill:裁剪填充,超过区域会裁剪,只保留显示区域的图片,图像无扭曲;
  • Fill:填充,图像完全填充显示区域,图像会扭曲;
C#方式

四、BoxView

BoxView:显示矩形。

实现效果
Xaml

1.BoxView有以下重要属性:

  • Color:设置颜色;
  • CornerRadius:设置圆角半径,可以将圆角半径设为正方形宽的一般画出圆形;
  • WidthRequest:宽;
  • HeightRequest:高。

2.注意:如果BoxView在一个没有约束的布局中,默认会以Fill的方式填充布局,例如:本例中布局Stacklayout没有设置水平约束,如果BoxView也不设置HorizontalOptions属性,那么横向将填充布局。如下图:

C#方式

五、WebView

WebView:显示Web和Html内容。

实现效果
Xaml

1.WebView支持以下内容类型:

  • Html和Css网站,也支持JavaScript;
  • 文档;
  • Html字符串;
  • 本地文件,例如:本地的html文件,css文件,图片等。

2.App混合开发:XF作壳,使用WebView显示已有的网页内容。

C#方式

后语

下篇介绍命令型控件,待续...


总目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,548评论 0 11
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,402评论 0 17
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,094评论 4 62
  • 无哈气锅盖厂家@看完前任3都疯了 最近电影《前任3:再见前任》赚了不少观众眼泪,一个以为不会走,一个以为会挽留,直...
    与敏同乐阅读 937评论 2 7
  • 我好像越来越喜欢和人聊天,但是也却越来越不清楚可以找谁聊天了。每天仍旧是24个小时,却感觉上班做底稿跑银行写报告的...
    一米八的郜函阅读 270评论 0 0