anpin/ContextMenuContainer

Usability of Nested Context Menu Containers

Closed this issue · 3 comments

First of all, I discovered this package yesterday and it really does have potential.
I tried using ContextMenuContainers in nested ListViews auf my .NET MAUI Project, and it has a few issues:

  1. Most important: I suggest, when ContextMenuContainers are being nested, the rightclick/tap&hold action should only be handled by the innermost container. Currently, on Windows it seems to be kinda random, whereas on android all context menus do pop up.

  2. Could it be a configurable Property on how long a container has to be held before the item menu items pop up?

  3. Could the positioning of the context menu items pe configurable? In my desktop application, they always appear above the container, on my android application they appear below.

I am pretty new in C# development (actually just created my account for this issue), but I am eager to contribute, if desired!

hi and welcome to github!

Most important: I suggest, when ContextMenuContainers are being nested, the rightclick/tap&hold action should only be handled by the innermost container. Currently, on Windows it seems to be kinda random, whereas on android all context menus do pop up.

Please provide a reproduction project for you use case, so I can provide you with solution. If you'd like to contribute it'd be better if you fork the repo, then add your use case to the sample project and submit a pull request.

Could it be a configurable Property on how long a container has to be held before the item menu items pop up?

AFAIK only Android would allow you to configure the hold time, but the package don't expose this as a parameter.

Could the positioning of the context menu items pe configurable? In my desktop application, they always appear above the container, on my android application they appear below.

I don't think there is a reliable way to do it on every platform.

It has been a while since I've looked at the API for context menus, so forgive me if my answers are inaccurate.
I'm flattered that you have created a new account for this issue and your help and contribution is most welcome.

Please provide a reproduction project for you use case, so I can provide you with solution.

I can not show you my project, as it is not a github project, but this is the nested List I am struggling with:

For Context: When selecting a portfolio (Header), the Menu Items of the portfolio should pop up. When selecting an asset (nested into a portfolio), the Menu Items of the asset should pop up. However, when selecting an asset on Windows, the Context Menu to pop up seems to be rather random, whereas on Android BOTH menus pop up simultaneously, sometimes even overlapping:

overlapping_context_menus

    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Portfolio">
            <ViewCell>
                <c:ContextMenuContainer>
                    <VerticalStackLayout>
                        <Label Text="{Binding Name}"/>
                        <ListView ItemsSource="{Binding Assets}">
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="local:Asset">
                                    <ViewCell>
                                        <c:ContextMenuContainer>
                                            <VerticalStackLayout>
                                                <Label Text="{Binding Name}"/>
                                            </VerticalStackLayout>
                                            <c:ContextMenuContainer.MenuItems>
                                                <c:ContextMenuItem Text="Wertpapier bearbeiten" Command="{Binding EditAssetCommand}"/>
                                                <c:ContextMenuItem Text="Wertpapier löschen" Command="{Binding DeleteAssetCommand}"/>
                                            </c:ContextMenuContainer.MenuItems>
                                        </c:ContextMenuContainer>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </VerticalStackLayout>
                    <c:ContextMenuContainer.MenuItems>
                        <c:ContextMenuItem Text="Neues Wertpapier" Command="{Binding NewAssetCommand}"/>
                        <c:ContextMenuItem Text="Portfolio bearbeiten" Command="{Binding EditPortfolioCommand}"/>
                        <c:ContextMenuItem Text="Portfolio löschen" Command="{Binding DeletePortfolioCommand}"/>
                    </c:ContextMenuContainer.MenuItems>
                </c:ContextMenuContainer>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

have you considered restructuring your layout? I think this should work:

<ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Portfolio">
            <ViewCell>
                <VerticalStackLayout>
                    <c:ContextMenuContainer>
                        <Label Text="{Binding Name}"/>
                        <c:ContextMenuContainer.MenuItems>
                            <c:ContextMenuItem Text="Neues Wertpapier" Command="{Binding NewAssetCommand}"/>
                            <c:ContextMenuItem Text="Portfolio bearbeiten" Command="{Binding EditPortfolioCommand}"/>
                            <c:ContextMenuItem Text="Portfolio löschen" Command="{Binding DeletePortfolioCommand}"/>
                        </c:ContextMenuContainer.MenuItems>
                    </c:ContextMenuContainer>
                    <ListView ItemsSource="{Binding Assets}">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="local:Asset">
                                <ViewCell>
                                    <c:ContextMenuContainer>
                                        <VerticalStackLayout>
                                            <Label Text="{Binding Name}"/>
                                        </VerticalStackLayout>
                                        <c:ContextMenuContainer.MenuItems>
                                            <c:ContextMenuItem Text="Wertpapier bearbeiten" Command="{Binding EditAssetCommand}"/>
                                            <c:ContextMenuItem Text="Wertpapier löschen" Command="{Binding DeleteAssetCommand}"/>
                                        </c:ContextMenuContainer.MenuItems>
                                    </c:ContextMenuContainer>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </VerticalStackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>