MenuFlyout in ListView in Windows Phone 8.1 - 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 -
Add "DrawerLayout" Nuget Package reference to your Project.
Add Name space xmlns:drawerLayout="using:DrawerLayout"
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>
Drawe Tap Event
private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e)
{
if (DrawerLayout.IsDrawerOpen)
DrawerLayout.CloseDrawer();
else
DrawerLayout.OpenDrawer();
}
Thats it.
Note: For more information visit Here

Answer 2

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;
}
}
}

Answer 3

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);
}
}