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

Admin 1
Viewed 3618

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.

xamarin.forms xamarin
2 Answers

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.

enter image description here

Device.RuntimePlatform in code-behind:

If the application is running on Android, it will use the different image source than iOS, for example: "Gear1.jpg" instead of "Gear.jpg".

enter image description here

Below is the image sources on different platforms:

enter image description here

Below is the actual application that running on iOS and Android.

Gear.jpg, Font.jpg, Sound.jpg -> Round-corner images for iOS

Gear1.jpg, Font1.jpg, Sound1.jpg -> Sharp-corner images for Android

iOS :

enter image description here

Android :

enter image description here

This is the link to download the demonstration project.

user_54838680
user_41490
Related