How to display URI images in Xamarin.Forms ListView?

4 mins read

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

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));
            }
        }
    }
}

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

Conclusion

I hope you enjoyed learning about how to display URI images in Xamarin.Forms ListView.

You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Did not find the solution Contact Support

Comments (1)

Please to leave a comment

Lloyd Sheen

Nov 26, 2021 08:48 AM

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.

Lakshmi Natarajan

Nov 29, 2021 08:42 PM

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

How to display URI images in Xamarin.Forms ListView?

Access denied