为下方元素制作 Canvas/Grid 透明区域

Question

我正在为我的应用程序设计游览视图，如下所示。在其中，我放置了一个 canvas/grid，带有一个 Ellipse 元素以聚焦在我的页面元素下方。我面临的问题是，虽然我为椭圆设置了Opacity="0"，但它没有完全透明，我能理解原因，但如何解决这个问题。

<Grid x:Name="RootGrid">
<Stackpanel x:Name="AllElementsHere">
    <TextBox/>
    <TextBox/>
    <TextBox/>
    <TextBox/>
</<Stackpanel>

<Canvas x:Name="TourView" Background="Black" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Ellipse x:Name="TransparentArea" Fill="Red" Opacity="0" Canvas.Left="250" Canvas.Top="40" Height="200" Width="500"/>
</Canvas>
</Grid>

Answer 1

据我了解，其实你要的是聚光效果，不是简单的XAML布局问题

您可以使用 SpotLight Class 来创建这样的效果并将其应用于 XAML 上的某个元素。

如果您不熟悉 Composition API，可以查看 WindowsCompositionSamples。有一个 'Light -> Thumbnail Lighting' 示例页面。可能就是你想要的。

为下方元素制作 Canvas/Grid 透明区域

Make Canvas/Grid with transparent area for underneath element

uwp-xaml