Flyout Menu windows phone 8.1 on hold Listview

Question

How can I show a flyout menu when use hold an item on a listview ? I have tried but the hold method reference the listview and not the item it self.

Answer 1

You may subscribe to Item's Template Holding event. For example like this:

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid Holding="Grid_Holding" VerticalAlignment="Stretch">
            <FlyoutBase.AttachedFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem x:Name="EditButton"
                            Text="Edit"
                            Click="EditButton_Click"/>
                    <MenuFlyoutItem x:Name="DeleteButton"
                            Text="Delete"
                            Click="DeleteButton_Click"/>
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>
            <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

And in the code behind, show the flyout:

private void Grid_Holding(object sender, HoldingRoutedEventArgs e)
{
    FrameworkElement senderElement = sender as FrameworkElement;
    // If you need the clicked element:
    // Item whichOne = senderElement.DataContext as Item;
    FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
    flyoutBase.ShowAt(senderElement);
}

private async void EditButton_Click(object sender, RoutedEventArgs e)
{
    // get the clicked element:
    Item datacontext = (e.OriginalSource as FrameworkElement).DataContext as Item;
    await new MessageDialog("Edit").ShowAsync();
}

You may also do it with Behaviours if you like. You will also find some help at Igrali's blog post .