How to display pop-ups / exits on a clicked item in a ListView / GridView in a Windows Store app

Question

I am working on a Windows Store application and would like to show additional information about the item that was clicked in a ListView or GridView. This information should be displayed in a popup window or popup window (in C #, not in XAML), next to the item clicked.

The problem is that the ItemClick event handler does not provide information about the click, but only about the data item. Thus, I have no information on where to show the popup or popup.

Answer 1

Use attached departure:

<DataTemplate x:Key="ListItemTemplate"> <Grid RightTapped="ListRightTapped" Tapped="ListTapped" Background="Transparent"> <Grid> ... </Grid> <FlyoutBase.AttachedFlyout> <Flyout Closed="listFlyout_Closed"> <StackPanel> ... </StackPanel> </Flyout> </FlyoutBase.AttachedFlyout> </Grid> </DataTemplate> 

And the code:

 private void ListRightTapped( object sender, RightTappedRoutedEventArgs e ) { FlyoutBase.ShowAttachedFlyout( sender as FrameworkElement ); } 

Answer 2

I created a solution that works just like the old Windows Phone Toolkit ContextMenuService component. Menu MenuFlyoutService. You can find the source on my blog . Using the service eliminates the need to subscribe to event handlers wherever you want to display the menu.

Your DataTemplate will look something like this:

 <StackPanel> <local:MenuFlyoutService.MenuFlyout> <MenuFlyout> <!-- using the Click event --> <MenuFlyoutItem Text="reply" Click="OnReplyClicked"/> <!-- using commanding to DataContext of MenuItem --> <MenuFlyoutItem Text="retweet" Command="{Binding RetweetCommand}"/> <!-- using commanding to DataContext of parent list --> <MenuFlyoutItem Text="favorite" Command="{Binding DataContext.FavoriteCommand, ElementName=TweetList}" CommandParameter="{Binding}"/> </MenuFlyout> </local:MenuFlyoutService.MenuFlyout> <!-- content for template goes here --> </StackPanel> 

Answer 3

All you have to do is get the DataContext:

If you have a list with items:

 MyList.ItemSource = new List<Item>(); 

And in XAML:

 <ListView x:Name="MyList"> <ListView.ItemTemplate> <DataTemplate> <Stackpanel> <TextBox Text="{Binding Name}" /> <Button Content="Add sth" Click="AddClick" /> </Stackpanel> </DataTemplate> </ListView.ItemTemplate> </ListView> 

And in CodeBehind to access the element by clicking on the button in the list:

 private void AddClick(sender, args){ var senderButton= (Button) sender; var item = (Item) sender.DataContext; //Item form the list } 

The var element is what you are looking for