MenuFlyout for Items in GridView in Windows 8.1 HubApp - windows

Question

I have Windows 8.1 Hub App that will eventually be released for tablets. I want to add MenuFlyout to GridView. So if I right click or hold then flyout will display. I've gone through several videos, tutorials etc. but none of them relates to GridView. Only for ListView on WindowsPhone. So none of them show how I should approach.
Is it possible? How I should deal with it?
HubSection
This is how my Hubsection with GridView looks like.
<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
I've created MenuFlayout as resource in App.xaml and attached it to GridViewItem DataTemplate. So it looks like this.
<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>
This is how I want to make Flyout to open in 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'' is object which I deliver in ''GridView.DataContext'' so there is no way that it will be castable to FrameworkElement.
Now I'm stuck. I'll be thankful for any guidance.

Answer 1

You can try the following:
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);
}
Hope i helps! :)