Home > OS >  Maui ListView binding to items of a list
Maui ListView binding to items of a list

Time:06-18

I am having some issues binding labels in a ListView to properties of items in a list in my ViewModel.

The ItemsSource of the ListView binds to the list just fine, but I can not access the properites of items in that list. Can anyone see what I am missing?

Compiler Message:

XFC0045 Binding: Property "Name" not found on "SocketApp.Pages.ConnectionPageViewModel".    

XAML:

<?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="SocketApp.Pages.ConnectionsPage"
             xmlns:local="clr-namespace:SocketApp.Pages"
             x:DataType="local:ConnectionPageViewModel"> <!-- ViewModel Set -->
    <StackLayout >
        <!-- Binding the List to the ListView -->
        <!-- This works fine -->
        <ListView ItemsSource="{Binding ListItems}" HasUnevenRows="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell >
                        <Grid Padding="5"  HeightRequest="50">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="9*" />
                            </Grid.ColumnDefinitions>
                            <StackLayout Orientation="Vertical" Grid.Column="1" Margin="5" >
                                <!-- Try to Bind to a property of an item within the list  -->
                                <!-- This is what is not working  -->
                                <Label Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" />
                                <Label Grid.Row="1" Grid.Column="1" Text="{Binding Address}" FontAttributes="Italic" VerticalOptions="End" />
                            </StackLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

ViewModel:

public class ConnectionPageViewModel : INotifyPropertyChanged
{
    private List<ConnectionListItem> _listItems = new List<ConnectionListItem>();
    public List<ConnectionListItem> ListItems
    {
        get => _listItems;
        set
        {
            _listItems = value;
            OnPropertyChanged(nameof(ListItems));
        }
    }
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

CodePudding user response:

The x:DataType tag will automatically be applied to all child controls. So if you want to use that, you will have to apply a x:DataType attribute to your ViewCell or any of the lower children so that the bindings in there will know they now need to look at another object.

Another solution is to remove the x:DataType altogether, but then you will lose the functionality as a whole.

This is known as compiled bindings.

  • Related