Displaying newly inserted item in CollectionView in .NET MAUI app

Question

In my .NET MAUI app, I have a user feed that I use a CollectionView to display. The CollectionView gets its data from an ObservableCollection in the corresponding ViewModel.

Once the user adds a new item, I do an Insert at index 0 which successfully adds the new item to the CollectionView but that item doesn't come into view unless I pull the items down in the CollectionView. As a matter of fact, I see no indication that a new item even exists at the top because the scroll bar remains at the top, giving no hint that there's another item right above the item that was first before the new item was inserted.

How do I make sure the newly added item gets displayed?

Here's the XAML code:

...
<CollectionView
   ItemsSource={Binding FeedItems}>
   ...
</CollectionView>

Here's the ViewModel code:

public ObservableCollection<FeedItem> FeedItems { get; } = new();

[RelayCommand]
async Task AddItem(FeedItem newItem)
{
   FeedItems.Insert(0, newItem);
}

Answer 1

Using MVVM many fear to access the ViewModel from the View. The purpose of MVVM pattern is to separate responisbility. So accessing the ViewModel for the purpose to manipulate the View controls is perfectly fine.

So, that said, if you want to use ScrollTo, that should to be done in the View and to get the event you can to access that through the ViewModel. Does that make sense?

In your Ctor add these lines of code and the added item in your CollectionView will be visable.

(BindingContext as MainViewModel ).FeedItems.CollectionChanged += (s, e) =>
{
    if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
    {
        int index = (BindingContext as MainViewModel ).FeedItems.IndexOf(e.NewItems[0] as FeedItem);
        MyCollection.ScrollTo(index, position: ScrollToPosition.MakeVisible, animate: true);
    }
};

Update

When adding an item to indext 0, it scrolls to it

Answer 2

I made changes to your ViewModel.

• 1. I changed the signature of AddItem so that the argument is now FeedItem (it appears you've already made this change too)
• 2. I added an ScrollRequested event handler

public partial class MainViewModel : ObservableObject
{
    public event EventHandler<int> ScrollRequested;
    static Random rnd = new Random();

    public ObservableCollection<FeedItem> FeedItems { get; } = new();

    [RelayCommand]
    async Task AddItem(FeedItem newItem)
    {
        FeedItems.Insert(0, newItem);
        ScrollRequested?.Invoke(this, 0);
    }

    [RelayCommand]
    async Task AddRandomItem()
    {
        await AddItem(new FeedItem() { Title = $"Item {rnd.Next()}" });
    }
}

I created a mock FeedItem class:

public class FeedItem
{
    public string Title { get; set; }
}

In the MainPage.xaml.cs code behind, I hook up to the EventHandler so I can update the scroll:

public partial class MainPage : ContentPage
{
    MainViewModel VM;
    public MainPage(MainViewModel VM)
    {
        this.VM = VM;
        InitializeComponent();
        BindingContext = VM;
        VM.ScrollRequested += VM_ScrollRequested;
    }

    ~MainPage()
    {
        VM.ScrollRequested -= VM_ScrollRequested;
    }

    private void VM_ScrollRequested(object sender, int index)
    {
        collectionView.ScrollTo(index);
    }
}

To test, I wire up to a simple Grid so that I can see the scroll working:

<Grid RowDefinitions="*,Auto">
    <CollectionView x:Name="collectionView" ItemsSource="{Binding FeedItems}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:FeedItem">
                <Label Text="{Binding Title}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <Button Grid.Row="1" Text="Add Random Item" Command="{Binding AddRandomItemCommand}"/>
</Grid>

A full working example of the above can be found here: https://github.com/stephenquan/StackOverflow.Maui/tree/main/StackOverflow.Maui.Mvvm.AddItem