How can I add an icon to a textcell in Xamarin Forms

I have a simple textCell such as:

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

I would like to have the ability to add an icon to this cell that would appear to the left of the word "English". An icon that matches exactly the size and position of the icons used in iOS Settings.

Has anyone looked into how to do this? I hope someone can suggest a solution and include some details on icon sizing and things like that.

2 Answers

Answers 1

You can create a Custom Cell to Custom ViewCell with Image,Text and OnPlateform to archive that.

1) Custom ViewCell :

This is the link for the Custom ViewCell Explanation:

Customizing a ViewCell

In this example, because we have multiple elements in the ViewCell, we use Stacklayout to put the Image before the Text and we use data binding simplify the code in XAML.

Below is the sample codes to demonstrate the implementation:

In 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>

In code-behind:

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 property :

In this project,We use Device.OnPlatform property in XAML and Device.RuntimePlatform property in Code-behind to demonstrate how to display a different images depending upon which platform you are on.This will be useful as it is possible that sometimes elements don’t work well across difference platforms.

This is the link for the Device Class explanation:

Device Class

OnPlatefrom in XAML:

We use OnPlatform with arguments to demonstrate the behavior on different platform.In this case, the image height on Android will be smaller than the image on iOS.