How to show Popup/Flyout at clicked item in ListView/GridView in Windows Store App

Question

I am working on a Windows Store App and would like to show some additional information about an Item that was clicked in ListView or GridView. This information should be shown in a Popup or Flyout (hast do be definded in C#, not in XAML) next to the clicked item.

The Problem is, that the ItemClick event handler gives no information about the clicked visual item but only about the data item. Thus I have no information about where to show the Flyout or Popup on screen.

never worked with store apps but on win forms it easy,do you have a sender object in addition to the event args? — knightsb, Mar 14 '14 at 15:19

score 17 · Answer 1 · answered Mar 14 '14 at 15:27

17

Use attached Flyout:

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

answered Mar 14 '14 at 15:27

crea7or

4,421
2
26
37

2

This example is what MS should have provided on their documentation page. Thanks. – Lavamantis Sep 26 '16 at 20:09
I also want this functionality in my app. could you please give me full example. I tried with the above code, but its not working. – Fracedo Oct 19 '16 at 09:30

score 3 · Answer 2 · answered Jul 31 '15 at 15:17

I've created a solution that works just like the old Windows Phone Toolkit ContextMenuService. The MenuFlyoutService. You can find the source on my blog. Using the service removes the need to subscribe to event handlers wherever you want to show the menu.

Your DataTemplate would look something like:

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

Przemek Marcinkiewicz · Answer 3 · 2015-03-13T17:30:35.847

All you need to do is get DataContext:

If You have 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 Item while click on the button on the list:

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

var item is whar you are looking for

How to show Popup/Flyout at clicked item in ListView/GridView in Windows Store App

3 Answers3

Linked

Related