Problem accessing to item fields of ListView

Question

Hello everybody, I'm struggling with Xamarin Forms ListView.
I have a xaml content page based on CustomerProfileViewModel:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:SidiboMobile.Controls"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:viewmodels="clr-namespace:XXX.Presentation.ViewModels"
             x:DataType="viewmodels:CustomerProfileViewModel"
             Title="Profilo Cliente"
             x:Class="XXX.Presentation.Views.CustomerProfilePage">
    <ContentPage.Content>
        <StackLayout Margin="10">
            <!-- Dati base cliente -->
            <controls:CardView BorderColor="{StaticResource Primary}"
                               x:Name="cardCliente"
                               CardTitle="Cliente"
                               CardDescription="Dati cliente"
                               IconBackgroundColor="{StaticResource Primary}"
                               IconImageGliph="" />

            <xct:Expander Tapped="OnExpanderTapped"
                          IsExpanded="True">
                <xct:Expander.Header>
                    <Label Text="Contatti utente"
                           BackgroundColor="LightBlue"
                           FontAttributes="Bold"
                           FontSize="Medium"
                           Padding="18" />
                </xct:Expander.Header>
                <Frame BorderColor="{StaticResource Primary}"
                       CornerRadius="1"
                       HasShadow="True"
                       IsClippedToBounds="True">
                    <ListView ItemsSource="{Binding Contatti}">
                    </ListView>
                </Frame>
            </xct:Expander>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Now, inside that content page I have a ListView based on ItemSource named "Contatti", built inside the viewmodel (code follows):

namespace XXX.Presentation.ViewModels {

    public class Contatto : BaseViewModel {
        private string indirizzo;
        private string telefono;

        public string Indirizzo {
            get { return indirizzo; }
            set { base.SetProperty(ref indirizzo, value); }
        }

        public string Telefono {
            get { return telefono; }
            set { base.SetProperty(ref telefono, value); }
        }
    }

    public class CustomerProfileViewModel : BaseViewModel {

        public CustomerProfileViewModel(Cliente cliente) {
            CurrentCustomer = cliente;

            List<Contatto> contatti = new List<Contatto>();
            foreach (var ubicazione in cliente.Ubicazioni) {
                Contatto contatto = new Contatto
                {
                    Indirizzo = string.Concat(
                        $"{ubicazione.Indirizzo}",
                        "\n",
                        $"{ubicazione.Localita} - {ubicazione.CAP} ({ubicazione.Provincia})"
                    ),

                    Telefono = string.Concat(
                        $"{ubicazione.PrimoTelefono}\n{ubicazione.SecondoTelefono}\n{ubicazione.TerzoTelefono}"
                    )
                };
                contatti.Add(contatto);
            }

            Contatti = new ObservableCollection<Contatto>(contatti);
        }

        private ObservableCollection<Contatto> contatti;

        public ObservableCollection<Contatto> Contatti { get => contatti; set => SetProperty(ref contatti, value); }

    }
}

My problem is that I don't know how to display Contatti properties "Indirizzo" and "Telefono" inside listview: I tried different code snippets, but none worked.
Could anyone give me some suggestion?
Thank you a lot in advance!

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

You can display the binding property name, but you cannot display the value of the Contatti properties, am I right?

If so, please add the <ListView.ItemTemplate>, then create a custom viewCell to add the binding property like following xml layout. Properties of cells (and children of cells) can be bound to properties of objects in the ItemsSource

   <xct:Expander Tapped="OnExpanderTapped"  
                              IsExpanded="True">  
                   <xct:Expander.Header>  
                       <Label Text="Contatti utente"  
                               BackgroundColor="LightBlue"  
                               FontAttributes="Bold"  
                               FontSize="Medium"  
                               Padding="18" />  
                   </xct:Expander.Header>  
                   <Frame BorderColor="{StaticResource Primary}"  
                           CornerRadius="1"  
                           HasShadow="True"  
                           IsClippedToBounds="True">  
                       <ListView ItemsSource="{Binding Contatti}">  
     
                           <ListView.ItemTemplate>  
                               <DataTemplate>  
                                   <ViewCell>  
                                       <StackLayout>  
                                           <Label Text="{Binding Indirizzo}"/>  
     
                                           <Label Text="{Binding Telefono}"/>  
     
                                       </StackLayout>  
                                   </ViewCell>  
                               </DataTemplate>  
                           </ListView.ItemTemplate>  
                       </ListView>  
                   </Frame>  
               </xct:Expander>  

If you do not famililar with Listview's binding cells, please refer to this Listview‘s Binding Cells article.

Best Regards,
Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I suggest to take a look to CollectionView instead of ListView