Windows 8.1 HubApp 中 GridView 中项目的 MenuFlyout答案

【问题标题】：MenuFlyout for Items in GridView in Windows 8.1 HubAppWindows 8.1 HubApp 中 GridView 中项目的 MenuFlyout
【发布时间】：2016-02-29 15:08:07
【问题描述】：

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

有可能吗？我该怎么处理？

HubSection

这就是我的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。

现在我被困住了。我会感谢任何指导。

【问题讨论】：

标签： windows xaml gridview windows-8.1

【解决方案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);

    }

希望我能帮上忙！ :)

【讨论】：