Attach Flyout to Listview - wpf

Question

I have a Listview defined like this:
<ListView x:Name="lvPlaylist" Width="530" Height="337" IsItemClickEnabled="True" ItemClick="gvPlaylist_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to open a "context"-Flyout on each Item on click.
So far I was only able to attach the flyout to the whole but then the flyout is shown at the border of the listview - not directly attached to the selected item.

Answer 1

Buttons have a Flyout property. All you have to do is wrap the contents of the template in a Button, create a Style for the button which removes all visuals for it, then create a Flyout for it.
<DataTemplate>
<Button Style="{StaticResource ButtonWrapperStyle}">
<Button.Content>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</Button.Content>
<Button.Flyout>
<!-- Make Flyout Here -->
</Button.Flyout>
</Button>
</DataTemplate>
Obviously there is stuff left to do here, but you get the idea.
Hope this helps and happy coding!

Answer 2

Looks like you can also do it like this
From MSDN
"The next example shows a Flyout attached to a TextBlock. As noted earlier, you can attach a Flyout to any FrameworkElement by using the FlyoutBase.AttachedFlyout attached property."
<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
Tapped="TextBlock_Tapped" FontSize="18">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>