WinRT 弹出窗口的奇怪行为

Question

我在 GridView 的 DataTemplate 中有一个弹出窗口。 DataTemplate 有 2 个按钮可打开此弹出窗口。这工作得很好。但是当滚动 GridView 时，我看到一些不稳定的行为。

弹出窗口打开

当 GridView 滚动时，弹出窗口停留在页面上

GridView ItemTemplate 的 XAML 代码

<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-index 以显示在所有其他元素上。一个简单的解决方法是，将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>