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

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

为了创建阴影，我使用UWP工具包中的DropShadowPanel。这个想法是这样的（当然行不通）：

阴影应该在面板外面。我该怎么做

阴影应该是这样的：

---

编辑：DropShadow应该在窗格外。重复帖子的答案会在窗格内产生阴影。除非我遗漏了一些内容。

您不能简单地将阴影应用到

窗格的直接子项上，因为它将显示为被切断。当然，您可以尝试覆盖
SplitView
的样式，并将阴影直接应用到
窗格
元素上，但是您很快就会发现
窗格
在XAML中定义了自己的剪裁逻辑，因此如果不小心，可能会破坏其底层UI逻辑

这里有一个简单的解决方案，可以在不修改样式的情况下工作。其思想是在内部元素上应用阴影，该元素与
窗格的根元素之间有足够的空间，阴影可以展开

假设
窗格位置设置为
右
，则根元素
边框（即
根边框
）应具有与
DropShadowPanel
的
模糊半径
（即
12
）匹配的左填充（即
12,0,0,0
）

另外，
窗格背景
需要透明，否则它会遮住阴影。相反，应该将背景色应用于根元素内部的容器元素（即
PaneContentGrid
）

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

XAML

<SplitView PanePlacement="Right" PaneBackground="Transparent">
    <SplitView.Pane>
        <Border x:Name="RootBorder" Padding="12,0,0,0">
            <Grid>
                <controls:DropShadowPanel BlurRadius="12"
                                          Color="Black"
                                          Opacity="0.3"
                                          HorizontalContentAlignment="Stretch"
                                          VerticalContentAlignment="Stretch">
                    <Rectangle Fill="White" />
                </controls:DropShadowPanel>

                <!-- SystemControlPageBackgroundChromeLowBrush is the default PaneBackground brush, feel free to change it to whatever you like! -->
                <Grid x:Name="PaneContentGrid" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
                    <!-- place your Panel content here. -->
                </Grid>
            </Grid>
        </Border>
    </SplitView.Pane>
</SplitView>



演示

看起来像是已经问过的问题或可能重复的问题。如果您遗漏了对方提出的问题，我将引用：但是，阴影出现在窗格内部，而我希望它位于SplitView.pane外部，将其包装。我如何实现这一点？谢谢是的，我读过。然而，答案并不能解决我的问题，因为它在窗格中创建了一个阴影。太棒了！这就是诀窍。非常感谢您详细的解决方案。
<SplitView PanePlacement="Right" PaneBackground="Transparent">
    <SplitView.Pane>
        <Border x:Name="RootBorder" Padding="12,0,0,0">
            <Grid>
                <controls:DropShadowPanel BlurRadius="12"
                                          Color="Black"
                                          Opacity="0.3"
                                          HorizontalContentAlignment="Stretch"
                                          VerticalContentAlignment="Stretch">
                    <Rectangle Fill="White" />
                </controls:DropShadowPanel>

                <!-- SystemControlPageBackgroundChromeLowBrush is the default PaneBackground brush, feel free to change it to whatever you like! -->
                <Grid x:Name="PaneContentGrid" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
                    <!-- place your Panel content here. -->
                </Grid>
            </Grid>
        </Border>
    </SplitView.Pane>
</SplitView>