Xamarin.Forms 中的单元格

17 Mar 2025 | 5 分钟阅读

Xamarin.Forms 单元格可以添加到 ListViews 和 TableViews 中。单元格是一种专门的元素，用于表格中的项目，并描述了列表中的元素应该如何呈现。 Cell 类派生自 Element，我们可以从中派生 VisualElements。单元格本身不是一个可视元素。它是一个用于创建可视元素的模板。单元格专门与 ListView 和 TableView 控件一起使用。

以下是单元格的类型

TextCell
SwitchCell
EntryCell
ImageCell
ViewCell

TextCell

TextCell 是一个具有两个单独文本区域的单元格，用于显示数据。 TextCell 通常用于 TableView 和 ListView 控件中的信息。这两个文本区域垂直对齐以最大化单元格内的空间。

在这里，我们希望借助 TextCell 在 ListView 中显示一个人的联系方式。

以下是我们在 TextCell 中显示人员联系方式的步骤。

示例

在此示例中，我们在 ListView 中创建 TextCell 以显示人员的 ContactDetail。

// 程序

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
    <StackLayout>
        <Label Text="Contacts Detail" FontSize="Medium" TextColor="Maroon" HorizontalOptions="Center"></Label>
         <ListView x:Name="Mylist">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Address}"></TextCell>
                    <!--here we bind the Text and Detail of the person in the TextCell-->
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

在这里，我们创建一个类，即 Data.CS，我们在其中创建数据。

Data.CS

using System;
using System.Collections.Generic;
using System.Text;

namespace XamarinCells
{
    public class Data
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }
}

在 MainPage.Xaml.CS 的编码页面上，我们创建一个数据列表，我们在其中提供人员的信息，然后借助 ListView 在 TextCell 中显示对象 (人员) 的信息。

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinCells
{
    public partial class MainPage : ContentPage
    {
        public List<Data> people = new List<Data>()
        {
            new Data{Name="Ayesha Tyagi", Address="A-27, defence colony, delhi,11024"},
            new Data{Name="Vaishali Tyagi", Address="E-377, Sec 16,Noida ,201301"},
        };
        public MainPage()
        {
            InitializeComponent();
            Mylist.ItemsSource = people;
        }
    }
}

执行此程序，单击模拟器。

输出

这将打印 Ayesha Tyagi 和 Vaishali Tyagi 的 ContactDetail

SwitchCell

SwitchCell 是一个结合了标签和开关功能的单元格。 SwitchCell 对于打开和关闭功能或用户首选项或配置选项很有用。

示例

在此示例中，我们正在创建一个 SwitchCell 以显示 Switch 的文本和功能。

//程序

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
  
    <ContentPage.Content>
        <StackLayout Padding="10">
            <StackLayout Orientation="Horizontal">
                <Label Text="SwitchCell"></Label>
                <Label Text="{Binding IsToggled, Source={x:Reference Switch}}" TextColor="Black" VerticalOptions="Center" HorizontalOptions="EndAndExpand"></Label>
                <Switch x:Name="Switch" VerticalOptions="Start"></Switch>
                
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

输出

EntryCell

EntryCell 是一个结合了 Label 和 Entry 功能的单元格。当我们在应用程序中构建一些功能以从用户那里收集数据时，EntryCell 会很有用。它们可以轻松地放置在 TableView 中，并可以被视为简单的表单。

示例

在这里，我们使用 Xaml 在 Xamarin.Forms 应用程序中创建具有 TableView 的 EntryCell，用于 Android 和通用 Windows 平台，用于跨平台应用程序开发。

为此，我们必须为跨平台应用程序设置环境。

在这里，我们将遵循以下步骤

步骤 1： 右键单击项目名称，如屏幕截图所示。

步骤 2： 单击“属性”，如屏幕截图所示。

步骤 3； 选中多个启动项目单选按钮 -> 单击应用 -> 单击确定。

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
  
    <ContentPage.Content>
       
        <StackLayout>
            <Label Text="Xamarin Form Entry Cell Demo in Android and UWP " VerticalOptions="Center" HorizontalOptions="Center" />
            <TableView Intent="Form">
                <TableRoot>
                    <TableSection Title="Application Form">
                        <EntryCell Label="Name:" HorizontalTextAlignment="Start" LabelColor="Black" Placeholder="Enter Your First Name Here" />
                        <EntryCell Label="Age :" LabelColor="Black" Placeholder="Enter Your Age Here" />
                        <EntryCell Label="Specialization :" LabelColor="Black" Placeholder="Enter Your Specialization Here" />
                    </TableSection>
                </TableRoot>
            </TableView>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

执行此程序，单击模拟器。

输出

在 Android 中

在这里，在输出中，这将在 Android 的 TableView 中的 EntryCell 中打印人员的信息。

输出

在 Windows 中

ImageCell

ImageCell 对象用于将图像和文本放置到表格中。 ImageCell 控制的功能类似于普通的页面控件。

MainPage.Xaml

xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
// In the source we have to give the name of the image file.
            <Image Source="nature.jpg"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

执行此程序，单击模拟器。

输出

ViewCell

我们可以将 ViewCell 视为一块空白的板。它是我们自己的画布，可以创建我们想要的单元格。

借助 ViewCell，我们可以自定义表单。

示例

在这里，我们借助 ListView 在 ViewCell 中创建一个页面。

//程序

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
    <StackLayout>
        <Label Text="Contacts Detail" FontSize="Medium" TextColor="Maroon" HorizontalOptions="Center"></Label>
         <ListView x:Name="Mylist">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--<ImageCell Text="{Binding Name}" Detail="{Binding Address}" ImageSource="{Binding Image}"></ImageCell>-->
                    <!--here we bind the Text and Detail of the person in the TextCell-->
                    <ViewCell>
                        <!--take ViewCell to customize the page-->
                        <StackLayout Orientation="Horizontal">
                            <Grid BackgroundColor="Maroon" Padding="10">
                                
                                <!--with the help of grid we will show the id(sequences of the items) set the padding property-->
                                <Label Text="{Binding Id}" TextColor="White"></Label>
                                <!--Binding Id bind the id--> 
                            </Grid>
                            <StackLayout Orientation="Vertical">
                                <!--create another stacklayout-->
                                <Label Text="{Binding Name}" TextColor="Maroon"></Label>
                                <!--create label to bind the name and address-->
                                <Label Text="{Binding Address}" TextColor="Purple"></Label>
                            </StackLayout>
                            
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

创建类，我们在其中定义要显示在页面上的项目的变量名。

//程序

Data.CS

using System;
Using System.Collections.Generic;
Using System.Text;

namespace XamarinCells
{
    public class Data
    {
        public string Name { get; set; }
        public string Address { get; set; }
        //public string Image { get; set; }
        public int Id { get; set; }
    
    }
}

在 MainPage.Xaml 的编码页面上，我们创建一个带有 id 的项目列表。

//程序

using System;
using System.Collections.Generic;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinCells
{
    public partial class MainPage : ContentPage
    {
        public List<Data> people = new List<Data>()
        {
            new Data{Name="Ayesha Tyagi", Address="A-27, defence colony, delhi,11024",Id=1},
            new Data{Name="Vaishali Tyagi", Address="E-377, Sec 16,Noida ,201301",Id=2},
        };
        public MainPage()
        {
            InitializeComponent();
            Mylist.ItemsSource = people;
        }
    }
}

执行此程序，单击模拟器。

输出

上面的程序打印了 Ayesha Tyagi 和 Vaishali Tyagi 的联系方式以及 Id 的数量。

下一主题Xamarin.Android

← 上一步下一步 →

Xamarin.Forms 中的单元格

TextCell

示例

SwitchCell

示例

EntryCell

示例

ImageCell

ViewCell

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Xamarin 教程

面试题

Xamarin.Forms 中的单元格

TextCell

示例

SwitchCell

示例

EntryCell

示例

ImageCell

ViewCell

示例

相关帖子

Xamarin vs Ionic

Xamarin 教程

Xamarin.Android

Xamarin 简介

Xamarin.Forms 生命周期

Xamarin 安装

Xamarin vs React Native

Xamarin Forms

Model-View-ViewModel 模式

Xamarin.Forms 的 XAML

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器