Question

我有一个简单的textCell，例如：

<TextCell Text="English" StyleId="disclosure" Tapped="openPage"/>

我希望能够在此单元格中添加一个图标，该图标显示在“英语”一词的左侧。一个与iOS设置中使用的图标大小和位置完全匹配的图标。

有没有人研究过如何做到这一点？我希望有人可以提出一个解决方案，并在图标大小等方面加入一些细节。

Answer 1

使用ImageCell而不是TextCell

ImageCell Documentation here

如果您想要更多地控制放置，尺寸和样式，请使用DataTemplate替换ImageCell

DataTemplate documentation here

Answer 2

您可以使用图片，文字和 OnPlateform 为 自定义ViewCell 创建自定义单元格以进行存档。

1）自定义ViewCell：

这是 Custom ViewCell 说明的链接：

Customizing a ViewCell

在这个例子中，因为我们在ViewCell中有多个元素，所以我们使用Stacklayout将Image放在Text之前，我们使用数据绑定来简化XAML中的代码。

以下是演示实施的示例代码：

在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:ImageList" 
             x:Class="ImageList.ImageListPage">
    <ListView x:Name = "listView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation = "Horizontal" Margin = "10,10,10,10">
                        <Image Source = "{Binding Image}" >
                            <Image.HeightRequest>
                                <OnPlatform x:TypeArguments="x:Double">
                                    <On Platform="iOS">30</On>
                                    <On Platform="Android,Windows">20</On>
                                </OnPlatform>
                            </Image.HeightRequest>
                        </Image>
                        <Label Text = "{Binding Name}" />
                    </StackLayout>
                </ViewCell>   
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

代码隐藏：

using Xamarin.Forms;
using System.Collections.Generic;
namespace ImageList
{
    public partial class ImageListPage : ContentPage
    {
        public ImageListPage()
        {
            InitializeComponent();

            string img1, img2, img3;

            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    img1 = "Gear.jpg";
                    img2 = "Font.jpg";
                    img3 = "Sound.jpg";
                    break;

                case Device.Android:
                case Device.WinPhone:
                default:
                    img1 = "Gear1.jpg";
                    img2 = "Font1.jpg";
                    img3 = "Sound1.jpg";
                    break;
            }

            listView.ItemsSource = new List<Item>
            {
                new Item {Name = "Setting",Image = img1} ,
                new Item {Name = "Display",Image = img2} ,
                new Item {Name = "Sounds",Image = img3}
            };
        }
    }
}

Item.cs：

using System;
namespace ImageList
{
    public class Item
    {
        public string Name { get; set; }
        public string Image { get; set; }
    }
}

。