Flyout menu in UWP with MVVM - mvvm

Question

I'm trying to implement a Flyout menu in a Windows 10 App (using MVVM) that opens when holding down an item of a GridView. I've been looking and I haven't been able to find any examples that works for me. The Flyout menu is not opening to display options. Does anyone know how can I do it?
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Image Source="{Binding Dictionary}" Height="25"/>
<TextBlock Text="{Binding Title}" Foreground="White" Width="170"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
Note: Solution found in https://marcominerva.wordpress.com/2013/12/17/using-a-behavior-to-open-attached-flyouts-in-winows-81-store-apps/

Answer 1

I think what you want to set is StackPanel.Flyout instead of FlyoutBase
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</StackPanel.Flyout>
<Image Source="{Binding Dictionary}" Height="25"/>
<TextBlock Text="{Binding Title}" Foreground="White" Width="170"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
Alternatively if this doesn't work for you you can target the GridViewItem.Flyout
<GridView>
<GridView.Resources>
<Style TargetType="GridViewItem">
<Setter Property="Flyout">
<Setter.Value>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</Setter.Value>
</Setter>
</Style>
</Gridview.Resources>