Home > Software engineering >  How to show items form an object using ListView in .NET MAUI?
How to show items form an object using ListView in .NET MAUI?

Time:12-12

I am still learning and I am having a hard time finding solutions for this issue. My issue is simple I want just show a simple list using ListView using MAUI. But I cannot make this work.

This is my code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ventas_Citel.Views.SeleccionAlmacen"
             xmlns:viewmodel="clr-namespace:Ventas_Citel.ViewModels"
             x:DataType="viewmodel:SeleccionAlmacenViewModel"
             Title="SeleccionAlmacen">

    <ListView ItemsSource="{Binding Almacenes}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Almacenes.nombre}"
                      Detail="{Binding Almacenes.nombre}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

C# code

 public partial class SeleccionAlmacenViewModel : ObservableObject
{
    // aqui se debe cargar la lista
    public SeleccionAlmacenViewModel()
    {
        Almacenes = new ObservableCollection<Almacenes>
        {
            new Almacenes 
            {
                id = "1",
                nombre = "Almacen 1",
                cve = "1"
            },
            
            new Almacenes
            {
                id = "2",
                nombre = "Almacen 2",
                cve = "2"
            },

            new Almacenes
            {
                id = "3",
                nombre = "Almacen 3",
                cve = "3"
            }
        };
    }

    [ObservableProperty]
    ObservableCollection<Almacenes> almacenes;


}

The error I am having is in the xaml file exactly where it says {Binding Almacenes.nombre} How can I show a list of its items? How do I access to Almacenes properties in the list?

How do I solve it?

I am trying to achieve something like this:

enter image description here

CodePudding user response:

I solved this by removing x:DataType from the xaml file.

CodePudding user response:

I solved this by removing x:DataType from the xaml file.

Great, but there is another solution for this, though.

By removing x:DataType, you've also disabled compiled bindings for your view. That's not a bad thing, but it might help to understand what compiled bindings are and what it has to do with x:DataType: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/compiled-bindings?view=net-maui-7.0. Essentially, compiled bindings increase the binding speed, which can make a MAUI application faster.

As an alternative to removing the x:DataType, you could also add it to the DataTemplate as well. You should fix the bindings for the Almacenes in either case:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ventas_Citel.Views.SeleccionAlmacen"
             xmlns:viewmodel="clr-namespace:Ventas_Citel.ViewModels"
             xmlns:model="clr-namespace:Ventas_Citel.Models"
             x:DataType="viewmodel:SeleccionAlmacenViewModel"
             Title="SeleccionAlmacen">

    <ListView ItemsSource="{Binding Almacenes}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:Almacenes">
                <TextCell
                    Text="{Binding nombre}"
                    Detail="{Binding nombre}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

For this, you'll also need to add the namespace that contains the Almacenes class (since I don't know where that is defined in your code, I'm just showing an example, you'll need to add the correct namespace yourself; for this example I've assumed it lives in Ventas_Citel.Models).

  • Related