Windows phone 8.1 Windows Phone 8.1中列表视图中的菜单输出

我正在从事一个通用windows项目

windows phone 8.1 UI包含一个listview。ListView的源是数据绑定的，其datatemplate包含一个按钮。我想在按住按钮时显示一个菜单输出（如wp8工具包中）

我的代码是：

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

但是，这会在单击按钮时打开菜单Out。如何将此行为更改为按住打开菜单的事件

此外，菜单窗口会放大打开它的按钮。如何禁用此缩放效果？

您可以从Windows Phone Toolkit进行修改

有很好的教程

简言之：

• 替换

  MenuFlyout

• 添加事件处理程序

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

• 修改

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

---

将按钮放在网格中，并将菜单Out连接到网格而不是按钮

像这样：

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

---

如果有人仍然感兴趣，可以使用抽屉布局

如何-

添加到您的项目中

添加名称空间

xmlns:drawerLayout=“使用：drawerLayout”

现在将页面分为两部分：抽屉和内容

4.添加抽屉图标

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

就这样

---

注意：有关更多信息，请访问

如何在菜单打开时禁用缩放效果？

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

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