如何在Edge中为SplitView.Pane创建DropShadow

Question

我目前正在尝试创建一个类似于边缘浏览器历史记录/收藏夹窗格的SplitView.Pane。因此，我需要在SplitView.Pane的（左）边框处设置阴影。

要创建阴影，我使用UWP Toolkit中的DropShadowPanel。这个想法是这样的（当然不起作用）：

<controls:DropShadowPanel>
    <SplitView.Pane>
        <!--Content-->
    </SplitView.Pane>
</controls:DropShadowPanel>

阴影应位于面板之外。我怎么做到这一点？

这就是阴影的样子：

How it should look like

编辑：DropShadow应该在窗格外面。重复帖子的答案会在窗格内创建一个阴影。除非我想念那里的东西。

Answer 1

您不能简单地向Pane的直接孩子施加阴影，因为它会被切断。您当然可以尝试覆盖SplitView 样式并将影子直接应用到Pane元素上，但您很快就会发现{{1在XAML中定义了自己的 Clipping 逻辑，所以如果你不小心，你可能会破坏它的底层UI逻辑。

这是一个简单的解决方案，无需修改样式即可使用。我们的想法是在内部元素上应用阴影，此元素与PaneRoot根元素之间有足够的空间，以便阴影展开。

假设Pane设置为PanePlacement，那么您的根元素Right（即Border）应该 left 填充（即RootBorder）与12,0,0,0的{​​{1}}（即BlurRadius）匹配。

此外，12需要透明，否则会掩盖阴影。相反，应该将背景颜色应用于根元素内的容器元素（即DropShadowPanel）。

请参阅下面的代码以获取一个简单示例 -

<强> XAML

PaneBackground

<强>演示