通过

“第 15 章： 交互式界面”摘要

  • 项目

注意

本书于 2016 年春季出版，之后再未更新。 书中有许多内容仍然有价值，但有些内容已过时，有些主题不再完全正确或完整。

本章节探讨了八个可便于与用户交互的 View 衍生物。

视图概述

Xamarin.Forms 包含 20 个派生自 View（而不是 Layout）的可实例化类。 前面的章节介绍了其中六个类：

本章节中的八个视图可有效便于用户与基本 .NET 数据类型交互：

数据类型 视图
Double %>
Boolean Switch
String .- .
DateTime %>

可以将这些视图视为基础数据类型的可视化交互表示。 下一章节（第 16 章：数据绑定）更深入地探讨了此概念。

以下章节将介绍其余六个视图：

滑块和步进器

Slider 和 Stepper 都允许用户从范围中选择一个数值。 Slider 是连续范围，而 Stepper 则涉及离散值。

滑块基础知识

Slider 是一个水平条，表示从左侧最小值到右侧最大值的值范围。 它定义了三个公共属性：

  • double 类型的 Value（默认值为 0）
  • double 类型的 Minimum（默认值为 0）
  • double 类型的 Maximum（默认值为 1）

支持这些属性的可绑定属性可确保它们是一致的：

  • 对于所有这三个属性，为可绑定属性指定的 coerceValue 方法可确保 Value 介于 Minimum 和 Maximum 之间。
  • 如果 Minimum 设置为大于或等于 Maximum 的值，MinimumProperty 的 validateValue 方法就会返回 false；对于 MaximumProperty，也是类似的情况。 validateValue 方法返回 false 会导致 ArgumentException 抛出。

如果 Value 属性更改（无论是以编程方式更改，还是用户控制 Slider），Slider 会触发含 ValueChangedEventArgs 参数的 ValueChanged 事件。

SliderDemo 示例展示了 Slider 的简单用法。

常见错误

在代码和 XAML 中，Minimum 和 Maximum 属性都是按照指定顺序设置的。 请务必初始化这些属性，以便 Maximum 总是大于 Minimum。 否则，将引发异常。

初始化 Slider 属性可能会导致 Value 属性更改，并触发 ValueChanged 事件。 应确保 Slider 事件处理程序不会访问在页面初始化期间尚未创建的视图。

ValueChanged 事件不会在 Slider 初始化期间触发，除非 Value 属性更改。 可以直接使用代码来调用 ValueChanged 处理程序。

颜色选择滑块

RgbSliders 程序包含三个 Slider 元素，可便于通过指定 RGB 值以交互方式选择颜色：

R G B 滑块的三倍屏幕截图

TextFade 示例使用两个 Slider 元素跨 AbsoluteLayout 移动两个 Label 元素，并让其中一个元素淡入另一个元素。

步进器区别

Stepper 定义与 Slider 相同的属性和事件，区别在于 Maximum 属性初始化为 100，且 Stepper 定义第四个属性：

  • double 类型的 Increment（初始化为 1）

从视觉上看，Stepper 包含两个标记为“–”和“+”的按钮。 按“–”会让 Value 递减 Increment，直至最小值 Minimum。 按 + 会让 Value 按 Increment 递增到最大值 Maximum。

StepperDemo 示例对此进行了展示。

开关和复选框

Switch 允许用户指定布尔值。

开关基础知识

从视觉上看，Switch 包含可以禁用和启用的切换。 此类定义了一个属性：

Switch 定义一个事件：

SwitchDemo 程序展示了 Switch。

传统复选框

一些开发人员可能更倾向于传统的 CheckBox，而不是 Switch。 Xamarin.FormsBook.Toolkit 库包含派生自 ContentView 的 CheckBox 类。 CheckBox 由 CheckBox.xaml 和 CheckBox.xaml.cs 文件实现。 CheckBox 定义了三个属性（Text、FontSize 和 IsChecked）和 CheckedChanged 事件。

CheckBoxDemo 示例展示了此 CheckBox。

键入文本

Xamarin.Forms 定义了三个可便于用户输入和编辑文本的视图：

  • Entry：用于单行文本
  • Editor：用于多行文本
  • SearchBar：用于执行搜索的单行文本。

Entry 和 Editor 派生自 InputView，后者又派生自 View。 SearchBar 直接派生自 View。

键盘和焦点

在无物理键盘的电话和平板电脑上，Entry、Editor 和 SearchBar 元素都会弹出虚拟键盘。 此键盘在屏幕上的出现与输入焦点有关。 视图的 IsVisible 和 IsEnabled 属性必须同时设置为 true，才能获得输入焦点。

输入焦点涉及两个方法、一个只读属性和两个事件。 这些都是由 VisualElement 定义的：

  • Focus 方法：尝试对元素设置输入焦点，并在成功时返回 true
  • Unfocus 方法：删除元素的输入焦点
  • IsFocused 只读属性：指明元素是否有输入焦点
  • Focused 事件：指明元素何时获得输入焦点
  • Unfocused 事件：指明元素何时失去输入焦点

选择键盘

派生 Entry 和 Editor 的 InputView 类只定义了一个属性：

这指明显示哪种类型的键盘。 一些键盘更适合输入 URI 或数字。

使用 Keyboard 类，可以使用静态 Keyboard.Create 方法定义键盘，此方法包含 KeyboardFlags 类型的参数，这一类型又是包含以下位标志的枚举：

如果在需要一段或多段文本时使用多行 Editor，最好调用 Keyboard.Create 来选择键盘。 对于单行 Entry，Keyboard 的以下静态只读属性非常有用：

KeyboardTypeConverter 允许在 XAML 中指定这些属性，如 EntryKeyboards 程序所示。

条目属性和事件

单行 Entry 定义了以下属性：

Entry 还定义了两个事件：

QuadraticEquations 示例展示了这两个事件。

编辑器区别

多行 Editor 定义了与 Entry 相同的 Text 和 Font 属性，但没有定义其他属性。 Editor 还定义了与 Entry 相同的两个属性。

JustNotes 是保存和还原 Editor 内容的自由格式笔记程序。

由于 SearchBar 不是派生自 InputView，因此它没有 Keyboard 属性。 但它确实有 Entry 定义的全部 Text、Font 和 Placeholder 属性。 此外，SearchBar 还定义了其他三个属性：

特定于平台的“取消”按钮清除文本。 SearchBar 还有特定于平台的“搜索”按钮。 按下其中一个按钮会触发 SearchBar 定义的两个事件之一：

SearchBarDemo 示例展示了 SearchBar。

日期和时间选择

DatePicker 和 TimePicker 视图实现特定于平台的控件，允许用户指定日期或时间。

DatePicker

DatePicker 定义了四个属性：

  • DateTime 类型的 MinimumDate：初始化为 1900 年 1 月 1 日
  • DateTime 类型的 MaximumDate：初始化为 2100 年 12 月 31 日
  • DateTime 类型的 Date：初始化为 DateTime.Today
  • string 类型的 Format：初始化为“d”（短日期模式）的 .NET 格式设置字符串，在美国将日期显示为“7/20/1969”。

可以在 XAML 中设置 DateTime 属性，具体方法是将属性表达为属性元素，并使用区域性固定的短日期格式（“7/20/1969”）。

DaysBetweenDates 示例计算用户选择的两个日期之间的天数。

TimePicker（还是 TimeSpanPicker？）

TimePicker 定义了两个属性，没有定义事件：

  • TimeSpan 类型（而不是 DateTime）的 Time：表示从午夜起经过的时间
  • string 类型的 Format：初始化为“t”（短时间模式）的 .NET 格式设置字符串，在美国将时间显示为“1:45 PM”。

SetTimer 程序展示了如何使用 TimePicker 指定计时器的时间。 此程序只有在前台时才能运行。

SetTimer 还展示了如何使用 Page 的 DisplayAlert 方法来显示警报框。