如何在Xamarin Forms中向textcell添加图标

Question

我有一个简单的textCell,如:

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

我希望能够在这个单元格中添加一个图标,该图标显示在单词"English"的左侧.一个与iOS设置中使用的图标大小和位置完全匹配的图标.

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

Answer 1

使用ImageCell而不是TextCell

ImageCell文档在这里

如果您想要更多地控制放置,大小调整和样式,请使用DataTemplate替换ImageCell

DataTemplate文档在这里

Answer 2

您可以使用Image,Text和OnPlateform创建自定义单元格到自定义ViewCell来存档.

1)自定义ViewCell:

这是Custom ViewCell解释的链接:

自定义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; }
    }
}

..

2)Device.OnPlatform&Device.RuntimePlatform属性:

在这个项目中,我们使用Device.OnPlatform在XAML和财产Device.RuntimePlatform财产代码隐藏来演示如何显示根据不同的图像在哪个平台是因为它是可能的,有时要素别on.This将是有益的在不同的平台上运作良好.

这是设备类说明的链接:

设备类

XAML中的OnPlatefrom:

我们使用带参数的OnPlatform来演示不同平台上的行为.在这种情况下,Android上的图像高度将小于iOS上的图像.

代码隐藏中的Device.RuntimePlatform:

如果应用程序在Android上运行,它将使用与iOS不同的图像源,例如:"Gear1.jpg"而不是"Gear.jpg".

以下是不同平台上的图像来源:

以下是在iOS和Android上运行的实际应用程序.

Gear.jpg,Font.jpg,Sound.jpg - > iOS的圆角图像

Gear1.jpg,Font1.jpg,Sound1.jpg - > Android的锐角图像

iOS:

Android:

这是下载演示项目的链接.