How to display ObservableCollection content in .net Maui?

Question

I am working on my project and I have encountered a problem. I don't know how to show data from a List.

Code-behind:

public ObservableCollection<GameResult> GameResultsToShow { get; set; } 
    = new ObservableCollection<GameResult>();

public void SortResults()
{
    List<GameResult> SortedGameResults; //to bind 

    if (gameOption.gameType == GameType.Time)
        SortedGameResults 
            = GameResults
                .FindAll(
                    x => x.gameOption.gameLevel == gameOption.gameLevel 
                    && x.gameOption.gameType == gameOption.gameType)
                .OrderBy(x => x.points)
                .ToList();
    else
        SortedGameResults 
            = GameResults
                .FindAll(
                    x => x.gameOption.gameLevel == gameOption.gameLevel 
                    && x.gameOption.gameType == gameOption.gameType)
                .OrderBy(x => x.Time)
                .ToList();

    var GameResultsToShow = new ObservableCollection<GameResult>(SortedGameResults);
}

Xaml:

<CollectionView 
     ItemsSource="{Binding GameResultsToShow }"
     BackgroundColor="PapayaWhip"
     Margin="10"
     Grid.Row="5"
     Grid.ColumnSpan="3"
     HorizontalOptions="Center">
     <CollectionView.ItemTemplate>
             <DataTemplate>
                   <TextCell Text="{Binding GameResult}"/>
             </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

have you read the docs on `CollectionView`? Binding to an `ObservableCollection` is no different than binding to a `List`. — Jason, Nov 29 '22 at 20:19
*"I don't know how to show data from a List"* Does your current code show the list of items? If so, then simply change `List` to `ObservableCollection`. This change makes the data "Observable": now when you add/delete items from SortedGameResults, the UI should update. — ToolmakerSteve, Nov 29 '22 at 20:33
I changed that but what next? Should I use sth like this: PropertyChanged.Invoke(this, PropertyChangedEventArgs(nameof(GameResultsToShow))); — wojtek, Nov 29 '22 at 20:37
you are creating a **new instance** of `GameResultsToShow` **after** the old instance has been bound, so yes you need either call `PropertyChanged` (assuming you're using `INotifyPropertyChanged`) or just manually assign `ItemsSource` — Jason, Nov 29 '22 at 20:49
You also need to pay attention to the fact that `CollectionView` can't use Cell control such as `TextCell`, `ViewCell`, etc and for more details, you can refer to my below answer. — Alexandar May - MSFT, Nov 30 '22 at 02:41

score 5 · Accepted Answer · edited Mar 30 '23 at 22:55

ListView can use Cell controls such as TextCell, ViewCell, etc. However, CollectionView can't use Cell controls. Here's the sample code below for your reference:

Xaml:

<ListView   
    ItemsSource="{Binding GameResultsToShow }"
    BackgroundColor="PapayaWhip">
                
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding GameResultValue}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Code-behind:

public ObservableCollection<GameResult> GameResultsToShow { get; set; } 

public MainPage()
{
      InitializeComponent();
       
      //Binding the itemsource as Jason suggested
      GameResultsToShow = new ObservableCollection<GameResult>
      {
           new GameResult{GameResultValue = "Win"},
           new GameResult{GameResultValue = "Lose"},
      };

     BindingContext = this;
}

Model:

public class GameResult 
{
    public string GameResultValue { get; set; }
}

How to display ObservableCollection content in .net Maui?

1 Answers1