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#方式

后语

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


总目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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