WinRT彈出窗口的奇怪行爲

Question

我在GridView的DataTemplate中有一個彈出窗口。 DataTemplate有2個按鈕可打開此彈出窗口。這工作得很好。但是當GridView被滾動時，我看到一些不穩定的行爲。

彈出打開

當GridView控件滾動彈出停留在頁面

XAML代碼就爲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

這是預期行爲。 PopUp有意擁有最高的z-索引來顯示所有其他元素。一個簡單的解決方法，就是擺脫PopUp，然後將{Binding IsPagesPopupOpen}下移到內部的Grid，然後在該網格的Visibility上將其用於可見性轉換器。除了它需要移動到底部以便顯示在內容之上。

更好地解釋。而不是你如何擁有它，這樣做;

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