使画布/网格的元素下方具有透明区域

Question

我正在为我的应用程序设计游览视图，如下所示。在其中放置一个画布/网格，并带有一个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->缩略图照明'示例页面。可能是您想要的。