Как отобразить всплывающее окно / всплывающее окно при нажатии элемента в ListView/GridView в приложении Windows Store

Я работаю над приложением для Магазина Windows и хотел бы показать некоторую дополнительную информацию об элементе, который был нажат в ListView или GridView. Эта информация должна отображаться во всплывающем окне или всплывающей подсказке (должно быть определено в C#, а не в XAML) рядом с выбранным элементом.

Проблема в том, что обработчик события ItemClick не дает никакой информации о визуально нажатом элементе, а только об элементе данных. Таким образом, у меня нет информации о том, где показывать всплывающее окно или всплывающее окно на экране.

3 ответа

Используйте прикрепленную 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>

И код:

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

Я создал решение, которое работает так же, как и старый Windows Phone Toolkit ContextMenuService. MenuFlyoutService. Вы можете найти источник в моем блоге. Использование сервиса избавляет от необходимости подписываться на обработчики событий, где бы вы ни хотели показывать меню.

Ваш DataTemplate будет выглядеть примерно так:

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

Все, что вам нужно сделать, это получить DataContext:

Если у вас есть список с элементами:

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

И в XAML:

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

А в CodeBehind для доступа к Item пока нажимаем на кнопку в списке:

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

Вар предмет, который вы ищете

Другие вопросы по тегам