Binding image in listview

Question

I am relatively new to xamarin, and I am currently trying to bind images to my listview, but no matter what I try, I can't seem to get them to display.

Here is my code:

Xaml:

 <ListView x:Name="memDisplayGrid" BackgroundColor="Transparent" HeightRequest="575" WidthRequest="200" ItemsSource="{Binding Members}"
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1, Constant=40}"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=1, Constant=330}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Image x:Name="memAVI" Grid.Column="0" Source="{x:Binding AviSource}" Aspect="AspectFill"/>
                                <Label Grid.Column="1" Text="{x:Binding name}" FontAttributes="Bold" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Code behind:

        private void InitializeMembersBlank()
        {
            Members = new List<Member>();
            
            for (int i = 0; i < App.UserDB.GetSpecificUser((int)App.Current.Properties["currentUser"]).MemeberNum; i++)
            {
                Members.Add(new Member
                {
                    AviSource = new Image { Source = "defaultAVI_48x48.jpg" },
                    systemID = i,
                    name = "Member " + (i + 1)
                }) ;
            }
        }

Member.cs:

public class Member
    {
            public string name { get; set; }
            public string pro_noun { get; set; }
            public string birthday { get; set; }
            public string role { get; set; }
            public int systemID { get; set; } // how is this being set???
            public string description { get; set; }
            public Image AviSource { get; set; }

        public override string ToString()
        {
            return "" + name + " /" + pro_noun + " /" + role + " /" + systemID; 
        }
    }

Please note that I have tried changing AviSource to ImageSource and a String, but neither was working for me. I can get other things to display but not the image.

Any suggestions? Thanks

Answer 1

try like this example

<ListView ItemsSource="{Binding Monkeys}"
      HasUnevenRows="true"
      ItemSelected="OnListViewItemSelected"
      ItemTapped="OnListViewItemTapped">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       VerticalOptions="End" />
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

---

or you can use xamarin.forms listview image cells

TableView tableView = new TableView
        {
            Intent = TableIntent.Form,
            Root = new TableRoot
            {
                new TableSection
                {
                    new ImageCell
                    {
                        // Some differences with loading images in initial release.
                        ImageSource =
                            Device.OnPlatform(ImageSource.FromUri(new Uri("http://xamarin.com/images/index/ide-xamarin-studio.png")),
                                              ImageSource.FromFile("ide_xamarin_studio.png"),
                                              ImageSource.FromFile("Images/ide-xamarin-studio.png")),
                        Text = "This is an ImageCell",
                        Detail = "This is some detail text",
                    }
                }
            }
        };

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#imagecell[enter link description here]1

---

• and I found same question in here xamarin form listview image binding