2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
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> |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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; }
}
XAML:
I see that the property is being called, the URL created is correct (checked in browser) but no image shows.
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