MenuFlyout in ListView in Windows Phone 8.1

Question

I am working on a universal windows project.

The windows phone 8.1 UI contains a listview. Listviews's source is databound and its datatemplate contains a button. I want to display a MenuFlyoutMenuFlyout when the button is press-and-hold (like ContextMenu in wp8 toolkit).

My code is :

    <DataTemplate x:Key="ListTemplate" x:Name="ListTemplate">
        <Button Style="{StaticResource ListButtonStyle}">
            <Button.Flyout> 
                <MenuFlyout>
                        <MenuFlyoutItem Text="delete"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </DataTemplate>

    <ListView ItemsSource="{Binding List}" ItemTemplate="{StaticResource ListTemplate}">

However, this opens the MenuFlyout on clicking the button. How can I change this behavior to press-and-hold event for opening MenuFlyout?

Also, the MenuFlyout zooms in on the Button on which it opens. How can this zooming effect be disabled?

Answer 1

If anybody still interested can use DrawerLayout

How to -

1. Add "DrawerLayout" Nuget Package reference to your Project.
2. Add Name space xmlns:drawerLayout="using:DrawerLayout"

3. Now divide your page in two part drawer and content

   <Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> </Grid.RowDefinitions>
<!-- Title Bar --> <Grid x:Name="TitleBar" Grid.Row ="0" Height="60">
<!-- —Title Bar Code Goes Here -->
</Grid> <!-- Drawer Layout -->
<drawerLayout:DrawerLayout Grid.Row="1" x:Name="DrawerLayout">
<!-- DrawerLayout code goes here -->
</drawerLayout:DrawerLayout>
</Grid>

4.Add Drawer Icon

<Grid x:Name="TitleBar" Background="#00ADEF" Grid.Row ="0" Height="60">  
<Grid.ColumnDefinitions>  
    <ColumnDefinition Width="Auto" />  
    <ColumnDefinition Width="*" />  
</Grid.ColumnDefinitions>  

<Image Margin="5"  x:Name="DrawerIcon"  Grid.Column="0" Source="/Assets/drawer_icon.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />  
<TextBlock Grid.Column="1" Text="DRAWER LAYOUT DEMO" Foreground="White" VerticalAlignment="Center" FontSize="18"/>  
</Grid> 

5. Drawe Tap Event

   private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e) 
   {  
     if (DrawerLayout.IsDrawerOpen)  
       DrawerLayout.CloseDrawer();  
     else  
       DrawerLayout.OpenDrawer();
   }
   

6. Thats it.

Note: For more information visit Here

Answer 2

Put button in a grid and attach menuflyout to the grid instead of button.

Like this:

<DataTemplate x:Key="ListTemplate" x:Name="ListTemplate">
 <Grid Holding="Grid_Holding">
    <Button Style="{StaticResource ListButtonStyle}">
    </Button>
    <FlyoutBase.AttachedFlyout>
      <MenuFlyout>
        <MenuFlyoutItem Text="delete"/>
      </MenuFlyout>
    </FlyoutBase.AttachedFlyout>
 </Grid>
</DataTemplate>

In Code behind:

    private void Grid_Holding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
    {
        if (e.HoldingState == Windows.UI.Input.HoldingState.Started)
        {
            FrameworkElement frameworkElement = sender as FrameworkElement;
            FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(frameworkElement);
            flyoutBase.ShowAt(frameworkElement);
        }
    }

Answer 3

You can modify ContextMenuService from Windows Phone Toolkit.

There is nice tutorial.

http://www.visuallylocated.com/post/2014/05/29/Migrating-from-the-Windows-Phone-Toolkit-ContextMenu-to-the-new-Runtime-MenuFlyout.aspx

In short:

• replace ContextMenu for MenuFlyout

• add event handler OnElementHolding

  private void OnElementHolding(object sender, HoldingRoutedEventArgs args)
  {
      // this event is fired multiple times. We do not want to show the menu twice
      if (args.HoldingState != HoldingState.Started) return;
  
      FrameworkElement element = sender as FrameworkElement;
      if (element == null) return;
  
      // If the menu was attached properly, we just need to call this handy method
      FlyoutBase.ShowAttachedFlyout(element);
   }
  

• modify OnMenuFlyoutChanged

  private static void OnMenuFlyoutChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
  {
      FrameworkElement element = o as FrameworkElement;
      if (null != element)
      {
          // just in case we were here before and there is no new menu
          element.Holding -= OnElementHolding;
  
          MenuFlyout oldMenuFlyout = e.OldValue as MenuFlyout;
          if (null != oldMenuFlyout)
          {
              element.SetValue(FlyoutBase.AttachedFlyoutProperty, null);
          }
          MenuFlyout newMenuFlyout = e.NewValue as MenuFlyout;
          if (null != newMenuFlyout)
          {
              element.SetValue(FlyoutBase.AttachedFlyoutProperty, newMenuFlyout);
              element.Holding += OnElementHolding;
          }
      }
  }