How do I display the values of a List in a ListView using XAML binding?

Question

I am using the Microsoft.Toolkit.Mvvm library as an MVVM library. My C# code is the following:

class SampleViewModel : ObservableObject
{ 
    private List<int> _sampleList;
    public List<int> sampleList
    {
        get => _sampleList;
        set
        {
            SetProperty(ref _sampleList, value);
        }
    }
}

The XAML code I am attempting to use to display all the values of the List<int> is:

<ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <ItemsControl ItemsSource="{Binding}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="x:Int32">
                            <TextBlock Text="{x:Bind}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

When the list is updated, the elements are created, but the value of the int is not displayed, only an empty row is present. If I use the following, I can display the value:

<TextBlock Text="{x:Bind ViewModel.sampleList[0], Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

How should I change the ListView, so that it displays the values as well?

MikeT · Accepted Answer · 2021-06-03T11:25:15.603

1

i think you have over complicated what you want to do

<ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:Int32">
            <TextBlock Text="{x:Bind}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

should do the trick

this reads as create an text box for every item in the sampleList if this doesn't work then the issue is most likely that your datacontext hasn't been set and the binding can't trace the relative address

also you should try using an Observable collection

ie

public ObservableCollection<int> sampleList { get ;} = new ObservableCollection<int>();

this is because you should be changing the content of the list not the list itself so you need to INotifyCollectionChanged Event to inform the binding the content has changed

edited Jun 03 '21 at 11:25

answered Jun 03 '21 at 10:27

MikeT

5,398
3
27
43

As I replied to the other answer as well, the simplified code throws a DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION. I'll give it a try with the ObservableCollection, although in that case, I have to change a few things, as the List is updated via a database call. I'll report back on how it goes! – Balazs Szekeres Jun 03 '21 at 10:39
that isn't a binding error see https://stackoverflow.com/questions/35392931/what-is-xaml-generated-break-on-unhandled-exception-and-app-g-i-cs-file – MikeT Jun 03 '21 at 10:41
What worked at the end is changing in your code to , and then the error disappeared, and also the ListView acts and intended. – Balazs Szekeres Jun 03 '21 at 11:19
may be a quirk of the toolkit that i've not seen but either way wasn't the binding that was an issue so couldn't diagnose with out your dev output – MikeT Jun 03 '21 at 11:26

score 1 · Answer 2 · answered Jun 03 '21 at 10:32

1

Try to use ObservableCollection<int> instead of List<int>
Your binding in XAML is very compicated. Try the following:

    <ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Label Content="{x:Bind}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

answered Jun 03 '21 at 10:32

user2471755

23
3

The simplified code with the List throws a DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION. I'll give it a try with the ObservableCollection, although in that case I have to change a few things, as the List is updated via a database call. I'll report back how it goes! – Balazs Szekeres Jun 03 '21 at 10:38

How do I display the values of a List in a ListView using XAML binding?

2 Answers2