如何像在 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 的style 并将阴影直接应用到Pane 元素上，但您很快就会发现PaneRoot 有自己的Clipping XAML 中定义的逻辑，因此如果您不小心，可能会破坏其底层 UI 逻辑。

这是一个无需修改样式即可工作的简单解决方案。这个想法是在内部元素上应用阴影，该元素与Pane 的根元素之间有足够的空间让阴影散开。

假设PanePlacement 设置为Right，那么您的根元素Border（即RootBorder）应该有一个left 填充（即12,0,0,0）匹配DropShadowPanel 的BlurRadius（即12）。

另外，PaneBackground 需要透明，否则会掩盖阴影。相反，应将背景颜色应用于根元素内的容器元素（即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>

演示