Xamarin 中的视图

2025年3月17日 | 阅读11分钟

跨平台移动应用程序的构建块是 Xamarin.Forms 视图。视图是用户界面对象,例如标签、按钮和滑块,在其他编程环境中称为控件或小部件。

视图可分为几个类别

用于演示的视图

Xamarin.Forms 有三个主要视图用于处理文本

  • 标签
    标签用于显示单行或多行文本。在这里,我们可以用同一行中的多种格式选项显示文本。
  • 输入
    要在一行中输入文本,请使用 Entry。Entry 具有密码模式。
  • 编辑器
    用于输入多行文本。

标签:标签视图用于显示文本。我们可以显示多行文本或单行文本。标签可以使用内联的多种格式选项显示文本。当文本无法在一行中显示时,标签视图可以换行或截断文本。

MainPage.Xaml


Views in Xamarin

Entry:Entry 用于接受单行文本。Entry 提供对颜色和字体的控制。Entry 具有密码模式,并且可以在输入文本之前显示占位符文本。

MainPage.XAML


Views in Xamarin

Editor:Editor 用于输入多行文本。Editor 提供对颜色和字体的控制。Editor 与其他文本呈现视图一样,显示文本属性。Editor 可用于设置和读取由编辑器呈现的文本。


Views in Xamarin
  • 图像
    Image 显示位图。在通用项目中,位图可以通过网络下载,也可以作为资源嵌入。我们可以使用 Xamarin.Forms 跨平台共享图像。图像是应用程序导航、品牌和可用性的重要组成部分。Xamarin.Forms 应用程序需要跨所有平台共享图像。它还会在每个平台上显示不同的图像。平台特定的图像还需要图标和启动画面。
Views in Xamarin

显示图像

Xamarin.Forms 使用图像视图在页面上显示图像。它有两个重要页面

  • Source:一个图像源实例,可以是文件、Uri、资源,用于设置要显示的图像。
  • Aspect:图像在其显示边界内的尺寸调整方式。
  • ImageSource:可以使用每种图像源类型的静态方法获取实例。
    • 来自文件:需要文件名(filename)或文件路径(Filepath),这可以在每个平台上解析。

要在 Xamarin.Forms 上显示图像,我们必须遵循以下步骤

在这里,我们将通过文件名添加图像。为此,我们首先需要下载图像(“jpg 图像下载”)。将图像从我们保存文件的文件夹复制并粘贴到可绘制文件夹中,为此我们必须遵循以下步骤:Android->Resources->Drawable

MainPage.XAML

输出

Views in Xamarin

现在我们将学习如何在后端代码中使用图像。

MainPage.XAML

MainPage.XAML.CS

输出

Views in Xamarin
  • 来自 Uri:需要 Uri(统一资源标识符)对象,例如 new Uri ("https://sample-videos.com/download-sample-jpg-image")。
    在这里,我们将通过 URI 显示图像,其中我们从互联网向源提供路径。
  • 来自资源:需要指向嵌入在应用程序或 .Net Standard 库项目中的图像文件的资源标识符,并使用 BuildAction: EmbeddedResource
  • 来自流:需要一个提供图像数据的流。
  • Aspect:Aspect 属性决定图像将如何缩放以适应显示区域
    • Fill:拉伸图像以完全填充显示区域。其结果可能是图像失真。
    • AspectFill:裁剪图像,使其填充显示区域,同时保留宽高比(即不失真)。
    • AspectFit:(如果需要)对图像进行信箱处理,使整个图像适合显示区域,并在顶部/底部添加空白区域,具体取决于图像是宽还是高。

图像可以从本地文件、嵌入式资源加载或下载。

  • BoxView:BoxView 是一个指定宽度、高度和颜色的简单矩形。我们可以使用 BoxView 进行装饰、基本图形以及通过触摸与用户进行交互。
Views in Xamarin

MainPage.XAML


Views in Xamarin

BoxView 乍一看可能很简单,但它功能多样,几乎可以生成通常只有矢量图形才能实现的所有视觉效果。

  • WebView:WebView 是一个用于在我们的应用程序上显示网页和 HTML 内容的视图。WebView 在我们的应用程序内显示 HTML 内容。
    • 内容
      WebView 支持以下类型的内容
      • HTML 和 CSS 网站:WebView 支持所有使用 HTML 和 CSS 编写的网站,包括对 javascript 的支持。
      • 文档:WebView 是使用每个平台上的原生组件实现的,因此 WebView 能够显示每个平台上可查看的文档。这意味着 PDF 文件在 iOS 和 Android 上都有效。
      • HTML 字符串:WebView 可以显示内存中的 HTML 字符串。
      • 本地文件:WebView 可以在应用程序中显示各种类型的内容。

MainPage.XAML

MainPage.XAML.CS


Views in Xamarin Views in Xamarin

OpenGLView

MainPage.XAML


Views in Xamarin

发起命令的视图

按钮

当我们点击一个按钮时,它会响应并在应用程序中执行特定的任务。在所有 Xamarin.Forms 中,按钮都扮演着重要的角色。按钮在遵循命令时显示短文本字符串。按钮还可以显示位图图像或文本和图像的组合。要发起命令,用户用手指或鼠标按下按钮。

MainPage.XAML

按钮点击背后的代码,按钮将计算按钮按下的次数。

MainPage.XAML.CS

输出

Views in Xamarin

ImageButton

ImageButton 显示图像并响应点击或单击,这会指示应用程序执行特定任务。

ImageButton 视图结合了 Button 视图和 Image 视图,以创建一个内容为图像的按钮。当我们用手指按下按钮或用鼠标点击它时,它将为应用程序执行特定任务。

设置图像源

ImageButton 定义了一个源属性,该属性应配置为在按钮上显示图像

SearchBar

它是 Xamarin.Forms UI 元素的一部分。它用于从列表或网页或任何地方搜索数据。我们可以放置搜索栏以从网络或任何其他地方进行搜索。我们大多在 Google 主页或任何搜索引擎上使用搜索栏。

Views in Xamarin

实施

在这里,我们将按照以下步骤编写代码

  • 创建 UI 类
  • 创建一个类并设置与列表视图的绑定。
  • 向列表添加数据并向搜索栏添加功能

创建 UI

首先,我们将创建一个 Xamarin.Forms 项目。在这里,我们将创建一个应用程序,并在 XAML 文件上创建一个 ListView 和搜索栏。在这里,我们可以使用 Stack Layout 并在 Stack Layout 中添加一个搜索栏和列表视图。搜索栏将位于列表的顶部。

MainPage.Xaml

现在我们将创建一个包含 Name 和 NUM 两个属性的类,如下所示

Contacts.CS

现在我们将向列表视图的文本单元格添加绑定。

在这里,类已创建并完成绑定。现在我们将在 Xaml.CS 文件中进行编码。

向 ListView 添加数据并向搜索栏添加功能。在这里,我们首先创建一个联系人类,然后对其进行初始化并添加一些新数据。之后,我们将 ListView 的 item source 设置为联系人列表。

将数据添加到 ListView 的代码

在这里,我们将创建搜索栏的 Text Changed 功能的事件处理程序,如下所示

代码

无论搜索栏中的文本何时更改,它都可以在两种可能的情况下工作。如果文本为 null 或空,我们将列表的 item source 设置为临时数据。临时数据包含所有数据的列表。否则,这可以根据 LINQ 查询更改列表的 item source。此查询在临时数据上工作,并在字符匹配中查找与名称起始值相同的给定文本。现在我们将搜索一些数据

完整的 XAML 代码和 CS 代码

MainPage.XAML

MainPage.XAML.CS


Views in Xamarin Views in Xamarin

用于设置值的视图

ListView

ListView 是一个用于呈现数据列表的视图,尤其是需要滚动的长列表。Xamarin.Forms 提供了 ListView 控件,可用于显示可滚动的数据列表。ListView 控件最适合同构数据。

MainPage.XAML

此代码定义了页面的用户界面,该页面包含 StackLayout 中的 ListView。ListView.ItemSource 属性指定要显示的项目。

输出

Views in Xamarin

填充数据

在这里,我们将使用 ItemSource 属性填充数据,该属性的类型为 IEnumerable。在这里,我们将使用存储在其中的对象集合中的数据填充 ListView。

将添加 Monkey 类

Monkey.cs

此代码定义了 Monkey 对象,该对象存储代表猴子的名称、位置和图像的 URL。此外,该类还重写了 ToString 方法以返回名称属性。

DatePicker

Xamarin.Form 视图允许用户选择日期。Xamarin.Forms DatePicker 调用平台的日期选择器控件,使用户能够选择日期。DatePicker 定义了八个属性。

  • MinimumDate:这是一个 DateTime 类型,默认为 1900 年的第一天。
  • MaximumDate:这是一个 DateTime 类型,默认为 2100 年的最后一天。

MainPage.XAML

TimePicker

Xamarin.Forms 视图允许用户选择时间。Xamarin.Forms TimePicker 调用平台的时间选择器控件,并使用户能够选择时间。

MainPage.XAML

MainPage.XAML.CS

输出

Views in Xamarin

TableView

TableView 是一个用于显示可滚动数据列表或选项的视图,其中行不共享相同的模板。TableView 没有 ItemSource 的概念,所以在这里我们将手动添加项目。

结构:TableView 中的元素按部分组织。TableView 的根是 TableRoot,它是一个或多个 TableSection 实例的父级。每个 TableSection 包含标题和一个或多个 ViewCell 实例。

MainPage.XAML

输出

Views in Xamarin