Windows 8.1 HubApp 中 GridView 中项目的 MenuFlyout

Question

我有 Windows 8.1 Hub 应用程序，最终将针对平板电脑发布。我想将 MenuFlyout 添加到 GridView。因此，如果我右键单击或按住，则会显示弹出窗口。我看过几个视频、教程等，但其中 none 与 GridView 相关。仅适用于 WindowsPhone 上的 ListView。所以 none 显示了我应该如何处理。

可能吗？我该如何处理？

枢纽部分

这就是我的 Hubsection 和 GridView 的样子。

<HubSection x:Name="CalcButtons" x:Uid="calculator" Header="{Binding Res.calc2Header, Source={StaticResource SharedStrings}}">
    <DataTemplate>
        <GridView
            ItemsSource="{Binding}"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Items In Group"
            ItemTemplate="{StaticResource StandardCalcButton}"
            SelectionMode="None"
            IsItemClickEnabled="True" Margin="0,0,0,0" ItemClick="GridView_ItemClick">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </DataTemplate>
</HubSection>

标准计算器按钮

我在 App.xaml 中创建了 MenuFlayout 作为资源并将其附加到 GridViewItem DataTemplate。所以它看起来像这样。

<MenuFlyout x:Key="CalcFlyout">
    <MenuFlyoutItem Text="Test1"/>
    <MenuFlyoutItem Text="Test2"/>
</MenuFlyout>

<DataTemplate x:Key="StandardCalcButton" >
    <Grid Height="180" Width="180" Margin="5,5,5,5"  FlyoutBase.AttachedFlyout="{StaticResource CalcFlyout}" >
        <Border Height="180" Background="{StaticResource AppYellow}">
            <StackPanel Grid.Row="1" Margin="0,0,0,0">
                <Image Source="{Binding ImagePath}" AutomationProperties.Name="{Binding Title}" Height="130" Width="180"/>
                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" TextLineBounds="Tight" TextAlignment="Center"/>
                <TextBlock Text="{Binding Subtitle}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="NoWrap" TextLineBounds="Tight" LineStackingStrategy="BlockLineHeight" TextTrimming="CharacterEllipsis" TextAlignment="Center" />
            </StackPanel>
        </Border>
    </Grid>
</DataTemplate>

这就是我想让 Flyout 在 GridView_ItemClicked

中打开的方式

private void GridView_ItemClick(object sender, ItemClickEventArgs e){
    FrameworkElement senderElement = e.ClickedItem as FrameworkElement;
    if (senderElement == null)
    {
        Debug.WriteLine("null");
        return;
    } else
    {
        FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
        flyoutBase.ShowAt(senderElement);
    }
}

''ClickedItem'' 是我在''GridView.DataContext'' 中传递的对象，因此无法将其转换为 FrameworkElement。

现在我卡住了。我将感谢任何指导。

Answer 1

您可以尝试以下方法：

private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {

        var gridViewItemsControl = sender as ItemsControl;
        var clickedItemContainer = gridViewItemsControl.ContainerFromItem(e.ClickedItem);

        Debug.WriteLine(clickedItemContainer);

        var clickedGridViewItem = clickedItemContainer as GridViewItem;
        var clickedItemGrid = clickedGridViewItem.ContentTemplateRoot as Grid;

        FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(clickedItemGrid);
        flyoutBase.ShowAt(clickedItemGrid);

    }

希望对您有所帮助！ :)

Windows 8.1 HubApp 中 GridView 中项目的 MenuFlyout

MenuFlyout for Items in GridView in Windows 8.1 HubApp

windows

xaml

gridview

windows-8.1