How to create a list with context menu for each item that can be used without changing selected item (Maui)

Question

My requirement is:

• My Maui page (XAML) will display a list of items (Item template: Image & text) that is bound to a model list. The model item has an ImagePath & Name property.
• The list should indicate a single currently selected item that the user has selected. It doesn't matter how the selected item is highlighted in the UI. E.g. Row highlighted in different color / Display a tickbox image on the selected row.
• Each item should have a ':' image on the right hand side and tapping displays a context menu that can be opened. The context menu can have up to 10 items.
• It should be possible to use the context menu for any item without changing the currently selected item.
• Only needs to work on Android right now.

What I've tried:

• A CollectionView that is bound to a list and the SelectionMode property is "Single". Using SwipeView then it can only fit 4 menu items on screen and it also changes the currently selected item. I couldn't see how to expand the row height and display the menu items on one per row.
• Added a flyout menu (FlyoutBase.ContextFlyout) to the Image & StackLayout but it doesn't appear.

How would I accomplish my requirements?

Answer 1

You may consider using CommunityToolkit Popup. When you click the image, it will show a popup which you can customize the appearance to show any content you want.

Let's say a CollectionView showing some items,

<CollectionView.ItemTemplate>
    <DataTemplate>
            <Grid>
                <Label HorizontalOptions="Start" Text="{Binding Name}" />
                <Image Source="dotnet_bot.png" HorizontalOptions="End">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </Image.GestureRecognizers>
                </Image>
            </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

And we implement the event handler in code behind. We set the anchor of the Popup to the Image, which made the Popup render close to the object.

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {

        var popup = new MyPopup();

        //set the Anchor to the Button,

        popup.Anchor = sender as Image;
        this.ShowPopup(popup);
    }

Of course you can Defining your Popup and customize your Popup to have at least 10 items (listview, collectionview or tableview, etc)