Windows 8.1 HubApp中GridView中的项目的MenuFlyout

时间:2016-02-26 13:53:37

标签: windows xaml gridview windows-8.1

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

有可能吗?我应该怎么处理呢?

HubSection

Hubsection GridView的{​​{1}}就是这样的。

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

StandardCalcButton

我已在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>

这就是我想在GridView_ItemClicked

中打开Flyout的方法
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);
    }
}

&#39;&#39; ClickedItem&#39;&#39;是我提供的对象&#39; GridView.DataContext&#39;&#39;因此无法将其转换为FrameworkElement。

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

1 个答案:

答案 0 :(得分:0)

您可以尝试以下操作:

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

    }

希望我有所帮助! :)