Как добавить меню из трех точек в Xamarin

Question

Я новичок в Xamarin. Я хочу добавить контекстное меню (что-то вроде трех точек, как показано на рисунке ниже) в моем приложении. Меню должно отображаться, когда я нажимаю на изображение из трех точек, которое присутствует внутри ItemTemplate ListView.

Ниже приведено описание того, что я ожидаю. Как я могу достичь этого требования в Xamarin?

Любая помощь по этому вопросу будет очень полезна.

Answer 1

У вас есть два варианта. Вы можете использовать контекстное меню для обычного поведения, если вы ожидаете, или вы можете использовать всплывающие окна с открытым исходным кодом, чтобы настроить, если ваше требование является сложным.

Если вы новичок в Xamarin, то я бы порекомендовал вам go с первым подходом.

Подход 1:

См. Здесь документацию для контекстного меню в ListView.

Эта документация будет более полезной.

Вам необходимо сделать что-то вроде ниже.

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Share"
                                    IconImageSource="share.png"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.ShareCommand}"
                                    CommandParameter="{Binding .}"/>
                    <MenuItem Text="Add to playlist"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.AddToPlaylistCommand}"
                                    CommandParameter="{Binding .}"/>
                </ViewCell.ContextActions>
                <Grid>
                    ...
                    <Image Source="ThreeDottedIcon" Grid.Column="2" HorizontalOptions="End">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ThreeDottedIconPopup}"/>
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Примечание. Вы должны написать лог-модель модели своего вида c на основе ваших требований, которые я здесь не дал.

Подход 2

В противном случае, если вы будете использовать sh для использования всплывающих окон с открытым исходным кодом, тогда для настройки есть плагин с открытым исходным кодом this.

Приведенный ниже пример кода отлично работает для меня.

Страница XAML

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            ...
            <Image Source="ThreeDottedIcon" Grid.Column="2" HorizontalOptions="End">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ThreeDottedIconPopup}"/>
                </Image.GestureRecognizers>
            </Image>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Страница XAML.cs

private Command _threeDottedIconPopup;
public Command ThreeDottedIconPopup
{
    get
    {
        return _threeDottedIconPopup?? (_threeDottedIconPopup= new Command(async () =>
        {
            await PopupNavigation.Instance.PushAsync(new ContextPopup(ParametersIfRequired));
        }));
    }
}

См. ссылка здесь для пакетов NuGet для Popup.

Надеюсь, это поможет.