WebView 作为 GridView 中的 Item 正在接管 UWP 中的 ItemClick 事件

Question

我在 UWP 的 GridView 中使用 WebView 作为项目。此应用程序的目的是显示用户以后可以编辑的 Svg 文件。

历史选择 WebView 而不是 SvgImageSource 是因为 Svgs 的质量是 100%（无像素），所以在多次尝试使用 Win2D 获得平滑图像失败后，我终于选择了我认为唯一的方法原生渲染 Svg 的方法，即 WebView。作为旁注，我们的 Svg 仅由路径组成，并且从 Svg 渲染 Xaml 路径已经显着降低了一个 svg 文件（大约 300kb）的性能，因此不幸的是这不是一个选项。所以回到 WebView:

   <DataTemplate x:Key="SvgThumbnailItemTemplate" x:DataType="inkWorkPage:SvgThumbnail">
                <WebView Source="{x:Bind UriSource}" Width="100" Height="100"/>
  </DataTemplate>

和GridView

  <GridView Grid.Row="1" Grid.Column="1"
              ItemsSource="{x:Bind SvgImages}"
              ItemTemplate="{StaticResource SvgThumbnailItemTemplate}"
              ItemClick="SvgImagesGridView_ItemClick"/>

发生的情况是每个 Svg 文件都加载到其 WebView 中并且显示没有问题，但我只能在一个项目上单击一次（事件被触发），但选择停留在这个项目上，我不能再单击任何项目。

我怀疑WebView通过冒泡之类的方式接管了一些事件，请问如何解决？

ps：我知道 GridView 中的 WebView 可能 ps 太多了，因为我只关注显示正确的图像，但这是唯一的我现在可以实现的显示原生 Svg 的方法。

Answer 1

我建议使用 WebViewImageBrush，将 webview 渲染为图像，或使用 Win2D 渲染 SVG。性能更高。您也可以尝试设置 WebView.IsHitTestVisible = false;

Answer 2

添加跨越 WebView 的 Border 使 GridViewItem 获得焦点并变得可点击。所以 DataTemplate 变成

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
        <TextBlock Text="{x:Bind DisplayName}"/>
        <WebView Source="{x:Bind UriSource}" Grid.Row="1"/>
        <Border Grid.RowSpan="2" Background="Transparent"/>
</Grid>

目前不推荐使用 Win2D 渲染 SVG，因为事实证明它的性能远低于 WebView。

WebView 作为 GridView 中的 Item 正在接管 UWP 中的 ItemClick 事件

WebView as Item in GridView is taking over ItemClick event in UWP

uwp

uwp-xaml