We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display URI images in Xamarin.Forms ListView (SfListView)

Platform: Xamarin.Forms |
Control: SfListView

You can display URI images in SfListView in Xamarin.Forms by loading Image in ItemTemplate.

C#

Defining ContactImage property in Model.

namespace ListViewXamarin
{
    public class Contacts : INotifyPropertyChanged
    {
        private string image;
 
        public string ContactImage
        {
            get { return this.image; }
            set
            {
                this.image = value;
                this.RaisedOnPropertyChanged("ContactImage");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisedOnPropertyChanged(string _PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
            }
        }
    }
}

C#

Populating ContactImage in ViewModel with URI.

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        
        public ObservableCollection<Contacts> contactsinfo { get; set; }
 
        public void GenerateInfo()
        {
            Random r = new Random();
            for (int i = 0; i < 40; i++)
            {
                var contact = new Contacts();
                contact.ContactImage = ""; //Your Url goes here
                contactsinfo.Add(contact);
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void OnPropertyChanged(string name)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

XAML

Binding ContactImage property with Image Source property.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}">
    
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSpacing="1" AutoFitMode="Height" ItemsSource="{Binding contactsinfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid x:Name="grid" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                    </Grid.RowDefinitions>
                                    <Grid RowSpacing="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
 
                                        <Frame CornerRadius="2" OutlineColor="Black" Padding="2" Margin="2" HasShadow="True">
                                            <Image HeightRequest="95" WidthRequest="95" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFit">
                                                <Image.Source>
                                                    <UriImageSource Uri="{Binding ContactImage}" CacheValidity="1" CachingEnabled="true"/>
                                                </Image.Source>
                                            </Image>
                                        </Frame>
 
                                        <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Label Text="{Binding ContactName}"/>
                                            <Label Grid.Row="1" Grid.Column="0" Text="{Binding ContactNumber}"/>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Lloyd Sheen
Nov 26, 2021

This code does not work:

I have the following:

ViewModel:

using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using Xamarin.Forms;

namespace AwesomeApp.ViewModels { public class VMPlayer : INotifyPropertyChanged { public string Name { get; set; } public int id { get; set; }

    public string imageString
    {
        get 
        {
            string baseURI = "http://nhl.bamcontent.com/images/headshots/current/168x168/PlayerID.jpg";
            string newURI = baseURI.Replace("PlayerID", id.ToString());
            return newURI;  
        }
    }


    public void RaiseChanged(string p1)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(p1));
    }

    public event PropertyChangedEventHandler PropertyChanged;

}

}

XAML:

        <Grid Grid.Row="3" x:Name="playerInfo" VerticalOptions="StartAndExpand">
            <StackLayout>
                <Label Text="{Binding Name}"></Label>
                <Image HeightRequest="95" WidthRequest="95" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFit">
                    <Image.Source>
                        <UriImageSource Uri="{Binding imageString}" />
                    </Image.Source>
                </Image>
            </StackLayout>
        </Grid>

I see that the property is being called, the URL created is correct (checked in browser) but no image shows.

Reply
Lakshmi Natarajan [Syncfusion]
Nov 30, 2021

Hi Lloyd,

Greetings from Syncfusion.

We have checked the reported query “no image shows when using UriImageSource” from our end. We would like to inform you that we could not replicate the reported scenario. We have modified this article sample with the given code snippets and attached in the following link,

Sample

Also, we could not access the mentioned image URI and faced the following error, ErrorImage

Please check our sample and let us know if you still facing the same issue? If not, please modify our sample and revert us back with the following details, • Share issue replication procedure and video • Share device configuration details • Share Syncfusion and Xamarin.Forms video

It will be helpful for us to check on it and provide you with the solution as soon as possible.

Regards, Lakshmi Natarajan

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile