Flyout menu in UWP with 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/

Where is your code? How can we debug this issue? – DotNetRussell Jul 13 '16 at 16:41 — DotNetRussell, Jul 13 '16 at 16:41
I'm sorry, I forgot to paste it – miguelangelcv Jul 13 '16 at 16:53 — miguelangelcv, Jul 13 '16 at 16:53

score 1 · Answer 1 · answered Jul 13 '16 at 16:58

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>

I have tried both and I get the following error: The member "Flyout" is not recognized or is not accessible. I found a solution by creating an Action: https://marcominerva.wordpress.com/2013/12/17/using-a-behavior-to-open-attached-flyouts-in-winows-81-store-apps/ Thanks anyway :) — miguelangelcv, Jul 13 '16 at 17:32

Flyout menu in UWP with MVVM

1 Answers1