Xamarin 中的视图2025年3月17日 | 阅读11分钟 跨平台移动应用程序的构建块是 Xamarin.Forms 视图。视图是用户界面对象,例如标签、按钮和滑块,在其他编程环境中称为控件或小部件。 视图可分为几个类别 用于演示的视图Xamarin.Forms 有三个主要视图用于处理文本
标签:标签视图用于显示文本。我们可以显示多行文本或单行文本。标签可以使用内联的多种格式选项显示文本。当文本无法在一行中显示时,标签视图可以换行或截断文本。 MainPage.Xaml ![]() Entry:Entry 用于接受单行文本。Entry 提供对颜色和字体的控制。Entry 具有密码模式,并且可以在输入文本之前显示占位符文本。 MainPage.XAML ![]() Editor:Editor 用于输入多行文本。Editor 提供对颜色和字体的控制。Editor 与其他文本呈现视图一样,显示文本属性。Editor 可用于设置和读取由编辑器呈现的文本。 ![]()
![]() 显示图像Xamarin.Forms 使用图像视图在页面上显示图像。它有两个重要页面
要在 Xamarin.Forms 上显示图像,我们必须遵循以下步骤 在这里,我们将通过文件名添加图像。为此,我们首先需要下载图像(“jpg 图像下载”)。将图像从我们保存文件的文件夹复制并粘贴到可绘制文件夹中,为此我们必须遵循以下步骤:Android->Resources->Drawable。 MainPage.XAML输出 ![]() 现在我们将学习如何在后端代码中使用图像。 MainPage.XAMLMainPage.XAML.CS输出 ![]()
图像可以从本地文件、嵌入式资源加载或下载。
![]() MainPage.XAML![]() BoxView 乍一看可能很简单,但它功能多样,几乎可以生成通常只有矢量图形才能实现的所有视觉效果。
MainPage.XAMLMainPage.XAML.CS![]() ![]() OpenGLViewMainPage.XAML![]() 发起命令的视图按钮当我们点击一个按钮时,它会响应并在应用程序中执行特定的任务。在所有 Xamarin.Forms 中,按钮都扮演着重要的角色。按钮在遵循命令时显示短文本字符串。按钮还可以显示位图图像或文本和图像的组合。要发起命令,用户用手指或鼠标按下按钮。 MainPage.XAML 按钮点击背后的代码,按钮将计算按钮按下的次数。 MainPage.XAML.CS 输出 ![]() ImageButtonImageButton 显示图像并响应点击或单击,这会指示应用程序执行特定任务。 ImageButton 视图结合了 Button 视图和 Image 视图,以创建一个内容为图像的按钮。当我们用手指按下按钮或用鼠标点击它时,它将为应用程序执行特定任务。 设置图像源 ImageButton 定义了一个源属性,该属性应配置为在按钮上显示图像 SearchBar它是 Xamarin.Forms UI 元素的一部分。它用于从列表或网页或任何地方搜索数据。我们可以放置搜索栏以从网络或任何其他地方进行搜索。我们大多在 Google 主页或任何搜索引擎上使用搜索栏。 ![]() 实施在这里,我们将按照以下步骤编写代码
创建 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 ![]() ![]() 用于设置值的视图ListViewListView 是一个用于呈现数据列表的视图,尤其是需要滚动的长列表。Xamarin.Forms 提供了 ListView 控件,可用于显示可滚动的数据列表。ListView 控件最适合同构数据。 MainPage.XAML 此代码定义了页面的用户界面,该页面包含 StackLayout 中的 ListView。ListView.ItemSource 属性指定要显示的项目。 输出 ![]() 填充数据 在这里,我们将使用 ItemSource 属性填充数据,该属性的类型为 IEnumerable。在这里,我们将使用存储在其中的对象集合中的数据填充 ListView。 将添加 Monkey 类 Monkey.cs 此代码定义了 Monkey 对象,该对象存储代表猴子的名称、位置和图像的 URL。此外,该类还重写了 ToString 方法以返回名称属性。 DatePickerXamarin.Form 视图允许用户选择日期。Xamarin.Forms DatePicker 调用平台的日期选择器控件,使用户能够选择日期。DatePicker 定义了八个属性。
MainPage.XAML TimePickerXamarin.Forms 视图允许用户选择时间。Xamarin.Forms TimePicker 调用平台的时间选择器控件,并使用户能够选择时间。 MainPage.XAML MainPage.XAML.CS 输出 ![]() TableViewTableView 是一个用于显示可滚动数据列表或选项的视图,其中行不共享相同的模板。TableView 没有 ItemSource 的概念,所以在这里我们将手动添加项目。 结构:TableView 中的元素按部分组织。TableView 的根是 TableRoot,它是一个或多个 TableSection 实例的父级。每个 TableSection 包含标题和一个或多个 ViewCell 实例。 MainPage.XAML 输出 ![]() |
我们请求您订阅我们的新闻通讯以获取最新更新。