Menu flyout after a right-tapped event

Question

I just want to make a menu flyout after a righttapped event on a gridViewItem .

My xaml code:

<Page
x:Class="HNT_listView2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HNT_listView2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:HNT_listView2.Models"
mc:Ignorable="d">

<Grid Background= "Salmon" Margin="0,0,10,0"  >

    <GridView ItemsSource="{x:Bind MyContactList}" 
              ItemClick="GridViewItem_Click" Name="NameOf_ItemClick"
              IsItemClickEnabled="True"
              RightTapped="GridViewItem_RightTapped"
              IsRightTapEnabled="True">


        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Contact">
                <StackPanel >
                    <FlyoutBase.AttachedFlyout>
                        <MenuFlyout Placement="Top">
                            <MenuFlyoutItem Text="Call"/>
                            <MenuFlyoutItem Text="Send a message"/>
                            <MenuFlyoutItem Text="Delete"/>
                        </MenuFlyout>
                    </FlyoutBase.AttachedFlyout>

                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">


                    <Image Width="100" Height="120" Source="{x:Bind Photo}" HorizontalAlignment="Center" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontSize="30" Text="{x:Bind Name}" HorizontalAlignment="Center"/>
                        <TextBlock FontSize="30" Text="{x:Bind Phone}" HorizontalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>

    </GridView>


</Grid>

My C sharp code:

        private void GridViewItem_RightTapped(object sender, RightTappedRoutedEventArgs e)
    {
        var s = (FrameworkElement)sender;

        if (s != null)
        {
            FlyoutBase f = FlyoutBase.GetAttachedFlyout(s);
            if (f != null)
            {
                f.ShowAt(s);
            }
            else {Debug.WriteLine("No f value");}                
        }
        else { Debug.WriteLine("No s value"); }
    }

My Contact.cs (for binding):

 public class Contact
{
    public string Name { get; set; }
    public string Photo { get; set; }
    public string Phone { get; set; }
}

public class ContactManager
{
    public static List<Contact> GetContacts()
    {
        var contact1 = new List<Contact>();
        contact1.Add(new Contact { Name = "Nguyen Van A", Phone = "0168111222", Photo = "Assets/1.jpg" });
        contact1.Add(new Contact { Name = "Tran Van B", Phone = " 0168333444", Photo = "Assets/2.jpg" });
        contact1.Add(new Contact { Name = "Le Van C", Phone = "0166555666", Photo = "Assets/3.jpg" });

        return contact1;
    }
}

Then the out put is printed "No f value"

Please help, thank you !

Answer 1

The sender is GridViewItem's item and the FlyoutBase is in the GridViewItem'.

Your FlyoutBase f = FlyoutBase.GetAttachedFlyout(s); alway is null,because the GridViewItem's item have not a Flyout.

You can use the define code flyoutbase.

MenuFlyout myFlyout = new MenuFlyout();
MenuFlyoutItem callItem = new MenuFlyoutItem { Text = "Call" };
MenuFlyoutItem sendItem = new MenuFlyoutItem { Text = "Send a message" };
MenuFlyoutItem deleteItem = new MenuFlyoutItem { Text = "Delete" };

myFlyout.Items.Add(callItem );
myFlyout.Items.Add(sendItem );
myFlyout.Items.Add(deleteItem );

And set the flyout in the click places.

myFlyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));