Seltsames Verhalten von WinRT Popup

Question

Ich habe ein Popup in einer DataTemplate eines GridView. Das DataTemplate hat 2 Tasten, die dieses Popup öffnen. Das funktioniert ganz gut. Aber ich sehe ein unberechenbares Verhalten, wenn die GridView gescrollt wird.

Popup geöffnet

Wenn Gridview die Popup-Aufenthalte auf der Seite

XAML-Code für das 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

gescrollt wird, dass erwartet wird Verhalten. PopUp hat absichtlich einen höchsten Z-Index, der über allen anderen Elementen angezeigt wird. Eine einfache Lösung wäre, die PopUp alle zusammen loszuwerden, und bewegen {Binding IsPagesPopupOpen} auf die Grid innerhalb es und verwenden Sie es auf dieser Grid Visibility mit einem Visibility Converter statt. Außer dass es nach unten verschoben werden müsste, damit es über dem Inhalt angezeigt wird.

Um besser zu erklären. Anstatt wie du es hast, mach das;

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