Syncfusion Xamarin Listview not displaying any items

Question

I want to insert a syncfusion linearlayout listview, but for some reason it's not displaying any items/data, and I'm not getting any errors at the same time, I tried changing binding syntax and a couple things, but I cannot seem to get it right.

This is my xaml:

            <syncfusion:SfListView x:Name="listView"
                ItemTemplate="{Binding Source={local2:BandInfoRepository}, Path=BandInfo, Mode=TwoWay}"
                ItemSize="100"
                AbsoluteLayout.LayoutBounds="1,1,1,1" 
                AbsoluteLayout.LayoutFlags="All" >
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid RowSpacing="0" Padding="0,12,8,0" ColumnSpacing="0" Margin="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="1" />
                            </Grid.RowDefinitions>
                            <Grid RowSpacing="0" Padding="8,0,8,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding Path=BandImage}"
                                    Grid.Column="0"
                                    Grid.Row="0"
                                    HeightRequest="80"
                                    WidthRequest="70"
                                    HorizontalOptions="Start"
                                    VerticalOptions="Start"
                                />
                                <StackLayout Orientation="Vertical" 
                                    Padding="5,-5,0,0"
                                    VerticalOptions="Start"
                                    Grid.Row="0"
                                    Grid.Column="1">
                                    <Label Text="{Binding Path=BandName}" 
                                        FontAttributes="Bold"
                                        FontSize="16"
                                        BackgroundColor="Green"
                                        TextColor="#000000" />
                                    <Label Text="{Binding Path=BandDescription}"
                                        Opacity="0.54"
                                        BackgroundColor="Olive"
                                        TextColor="#000000"
                                        FontSize="13" />
                                </StackLayout>
                            </Grid>
                            <BoxView Grid.Row="1" 
                                HeightRequest="1"
                                Opacity="0.75"
                                BackgroundColor="#CECECE" />
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>

And this is the class where I'm getting the data from:

public class BandInfo : INotifyPropertyChanged
{
    private string bandName;
    private string bandDesc;
    private ImageSource _bandImage;
    public string BandName
    {
        get { return bandName; }
        set
        {
            bandName = value;
            OnPropertyChanged("BandName");
        }
    }

    public string BandDescription
    {
        get { return bandDesc; }
        set
        {
            bandDesc = value;
            OnPropertyChanged("BandDescription");
        }
    }

    public ImageSource BandImage
    {
        get { return _bandImage; }
        set
        {
            _bandImage = value;
            OnPropertyChanged("BandImage");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
}

And just in case, this is how I'm filling the collection (BandInfoRepository.cs):

public class BandInfoRepository
{
    private ObservableCollection<BandInfo> bandInfo;

    public ObservableCollection<BandInfo> BandInfo
    {
        get { return bandInfo; }
        set { this.bandInfo = value; }
    }

    public BandInfoRepository()
    {
        GenerateBookInfo();
    }

    internal void GenerateBookInfo()
    {
        string[] BandNames = new string[] {
            "Nirvana",
            "Metallica",
            "Frank Sinatra"
        };

        string[] BandDescriptions = new string[] {
            "Description",
            "Description",
            "Description"
        };

        bandInfo = new ObservableCollection<BandInfo>();

        for (int i = 0; i < BandNames.Count(); i++)
        {
            var band = new BandInfo()
            {
                BandName = BandNames[i],
                BandDescription = BandDescriptions[i],
                BandImage = ImageSource.FromResource("Lim.Images.Image" + i + ".png")
            };
            bandInfo.Add(band);
        }
    }
}

I hope you guys can help me out as I've been stuck with this for a while now. Thanks in advance.

@Jason It's a class, I just took the example and renamed classes for more "appropiate" names for my project. — Mauricio Cárdenas, Aug 31 '17 at 20:28
look at Ivan's answer below, he is pointing out the same problem I am — Jason, Aug 31 '17 at 20:31
Already tried it, I changed the "ItemTemplate" to "ItemSource" and part of the data is showing now, but I can't still get the BandImage to work — Mauricio Cárdenas, Aug 31 '17 at 20:38
I think you just want to bind that to a string with a path or url in it — Jason, Aug 31 '17 at 20:40
Currently trying, will update with result, thanks for your help — Mauricio Cárdenas, Aug 31 '17 at 20:42
Already did, but I got the same result, the images are not being shown. I changed every ImageSource and replaced it with a string, also removed everything from the "for" cycle and left this: BandImage = "Lim.Images.Image" + i + ".png" — Mauricio Cárdenas, Aug 31 '17 at 20:46
see https://stackoverflow.com/questions/43343966/binding-image-source-dynamically-on-xamarin-forms — Jason, Aug 31 '17 at 20:50
every image is already included on every project, I added them to both Images folder and Resources folder (currently working on iOS) but nothing shows up. — Mauricio Cárdenas, Aug 31 '17 at 21:06
Update: I just fixed the problem with the images, I went back to ImageSource and set up the build action to embedded resource. Took from: https://stackoverflow.com/questions/33952074/embedded-images-not-showing — Mauricio Cárdenas, Aug 31 '17 at 21:42

score 1 · Accepted Answer · answered Aug 31 '17 at 20:30

1

Looks like you unintentionally bind ItemTemplate twice and not bind any ItemsSource even once.

answered Aug 31 '17 at 20:30

Ivan Bukashkin

674
3
11

Let me check that, I'm new to OOP and Xamarin too, will try to fix it – Mauricio Cárdenas Aug 31 '17 at 20:35
Seems like it's partially working now, but the BandImage binding is still not working and some other properties as well, any idea? – Mauricio Cárdenas Aug 31 '17 at 20:37

score 1 · Answer 2 · answered Sep 05 '17 at 18:31

We have looked into your code snippet and we have found that you have binded the underlying collection to ItemTemplate property instead of ItemsSource property. Further to bind the underlying collection you have to set your ViewModel(i.e. BandInfoRepository) as BindingContext for ContentPage. Please refer the below code snippets to know how to set BindingContext for your page and also to bind the underlying collection into the ItemsSource property.

Code Example:[XAML]

<ContentPage>
  <ContentPage.BindingContext>
    <local:BandInfoRepository/>
  </ContentPage.BindingContext>

  <ContentPage.Content>
    <listView:SfListView x:Name="listView" ItemSize="70" ItemsSource="{Binding BandInfo}" >

      <listView:SfListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid x:Name="grid" RowSpacing="1">
                <Grid.RowDefinitions>
                  <RowDefinition Height="*" />
                  <RowDefinition Height="1" />
                </Grid.RowDefinitions>
                <Grid RowSpacing="1">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding BandImage}"
     VerticalOptions="Center"
     HorizontalOptions="Center"
     HeightRequest="50" Aspect="AspectFit"/>
                  <Grid Grid.Column="1"
    RowSpacing="1"
    Padding="10,0,0,0"
    VerticalOptions="Center">
                    <Label Text="{Binding ContactName}"/>
                  </Grid>
                </Grid>
                <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/>
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </listView:SfListView.ItemTemplate>
    </listView:SfListView>
  </ContentPage.Content>
</ContentPage>

For your assistance, we have attached the working sample link below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/186932/ze/ListViewSample905947849

Syncfusion Xamarin Listview not displaying any items

2 Answers2