Comportement étrange de WinRT Popup

Question

J'ai un popup dans un DataTemplate d'un GridView. Le DataTemplate a 2 boutons qui ouvrent ce popup. Cela fonctionne parfaitement bien. Mais je vois un comportement erratique quand le GridView est défilé.

Popup ouvert

Lorsque GridView est défilée les séjours popup sur la page

code XAML pour le GridView ItemTemplate

<DataTemplate x:Key="BrandItemTemplate"> 
       <Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="125"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Popup x:Name="PagesPopup" IsOpen="{Binding IsPagesPopupOpen}"> 
         <Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"> 
          <ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None"> 
           <ListView.ItemTemplate> 
            <DataTemplate> 
             <TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/> 
            </DataTemplate> 
           </ListView.ItemTemplate> 
           <ListView.ItemContainerStyle> 
            <Style TargetType="ListViewItem"> 
             <Setter Property="Height" Value="30"/> 
            </Style> 
           </ListView.ItemContainerStyle> 
          </ListView> 
          <Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8"> 
           <interactivity:Interaction.Behaviors> 
            <core:EventTriggerBehavior EventName="Tapped"> 
             <core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/> 
            </core:EventTriggerBehavior> 
           </interactivity:Interaction.Behaviors> 
          </Image> 
         </Grid> 
        </Popup> 
        <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/> 
        <Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right"> 
         <TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/> 
        </Border> 
        <Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25"> 
         <TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/> 
         <StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal"> 
          <Image Source="/Assets/Icons/pagesIcon.png" Height="30"> 
           <interactivity:Interaction.Behaviors> 
            <core:EventTriggerBehavior EventName="Tapped"> 
             <core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/> 
            </core:EventTriggerBehavior> 
           </interactivity:Interaction.Behaviors> 
          </Image> 
          <Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0"> 
           <interactivity:Interaction.Behaviors> 
            <core:EventTriggerBehavior EventName="Tapped"> 
             <core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/> 
            </core:EventTriggerBehavior> 
           </interactivity:Interaction.Behaviors> 
          </Image> 
         </StackPanel> 
        </Grid> 
       </Grid> 
      </DataTemplate> 

Answer 1

Ce qui est attendu comportement. PopUp a intentionnellement un z-index le plus élevé à afficher sur tous les autres éléments. Une solution facile, serait de se débarrasser du PopUp tous ensemble, et déplacez {Binding IsPagesPopupOpen} vers le Grid à l'intérieur et utilisez-le sur Visibility de cette grille avec un convertisseur de visibilité à la place. Sauf qu'il aurait besoin d'être déplacé vers le bas afin qu'il affiche au-dessus du contenu.

Pour mieux expliquer. Au lieu de comment vous l'avez, faites ceci;

<DataTemplate x:Key="BrandItemTemplate"> 
    <Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="125"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions>   

    <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/> 
    <Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right"> 
    <TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/> 
    </Border> 
    <Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25"> 
     <TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/> 
     <StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal"> 
     <Image Source="/Assets/Icons/pagesIcon.png" Height="30"> 
      <interactivity:Interaction.Behaviors> 
      <core:EventTriggerBehavior EventName="Tapped"> 
       <core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/> 
      </core:EventTriggerBehavior> 
      </interactivity:Interaction.Behaviors> 
     </Image> 
     <Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0"> 
      <interactivity:Interaction.Behaviors> 
      <core:EventTriggerBehavior EventName="Tapped"> 
       <core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/> 
      </core:EventTriggerBehavior> 
      </interactivity:Interaction.Behaviors> 
     </Image> 
     </StackPanel> 
    </Grid> 

    <!-- We move it down here to ensure it appears over everything and without having to set a fixed z-index, and add your visibility converter --> 
    <Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" 
      Visibility="{Binding IsPagesPopupOpen, Converter={StaticResource BooleanToVisibilityConverter}}"> 

     <ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
      <TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
      <Setter Property="Height" Value="30"/> 
      </Style> 
     </ListView.ItemContainerStyle> 
     </ListView> 
     <Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8"> 
     <interactivity:Interaction.Behaviors> 
      <core:EventTriggerBehavior EventName="Tapped"> 
      <core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/> 
      </core:EventTriggerBehavior> 
     </interactivity:Interaction.Behaviors> 
     </Image> 

    </Grid> 

    </Grid> 
</DataTemplate>