作为 GridView 中的项的 Web 视图正在接管 UWP 中的项单击事件

Question

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

历史选择 WebView 而不是SvgImageSource是因为 Svg 的质量是 100%(无像素(，因此在多次尝试使用 Win2D 获得平滑图像失败后，我终于选择了我认为是本机渲染 Svg 的唯一方法，即WebView。作为旁注，我们的 Svg 仅由路径组成，并且从 Svgs 渲染 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可能太多了，因为我只关注显示正确的图像，但这是我现在可以实现的显示本机 Svg 的唯一方法。

Answer 1

添加跨越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。

Answer 2

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