Windows Phone 8.1的ListView中的MenuFlyout

Question

我正在开发一个通用的Windows项目。

windows phone 8.1 UI包含一个listview。 Listviews的源代码是databound，其数据模板包含一个按钮。我想在按下按钮时显示MenuFlyout MenuFlyout（如wp8工具包中的ContextMenu）。

我的代码是：

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

然而，这将打开MenuFlyout上单击按钮。如何将此行为更改为按住事件以打开MenuFlyout？

此外，MenuFlyout放大它打开的按钮。如何禁用这种缩放效果？

Answer 1

您可以从Windows Phone工具包修改ContextMenuService。

有很好的教程。

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

简而言之：

• 更换ContextMenu为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; 
       } 
      } 
  } 
  

Answer 2

将钮扣和附加menuflyout到电网，而不是按钮。

像这样：

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

在后面的代码：

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

如果有人仍然有兴趣可以使用DrawerLayout

如何 -

1. 将"DrawerLayout" Nuget Package reference添加到您的项目中。
2. 添加名称空间xmlns:drawerLayout="using:DrawerLayout"

3. 现在将你的网页在两个部分抽屉和内容

   <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.增加抽屉图标

<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点按事件

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

完蛋了。

注：欲了解更多信息，请访问Here