如何像在 Edge 中一样为 SplitView.Pane 创建投影

Question

我目前正在尝试创建一个看起来有点像边缘浏览器 history/favourites 窗格的 SplitView.Pane。因此，我需要在 SplitView.Pane 的（左）边框处添加阴影。

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

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

阴影应该在面板之外。我如何完成这项工作？

阴影应该是这样的：

How it should look like

编辑：DropShadow 应该在窗格之外。 duplicate-post 的答案在窗格内创建了一个阴影。除非我错过了什么。

Answer 1

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

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

假设 PanePlacement 设置为 Right，那么您的根元素 Border（即 RootBorder）应该有 left 与 DropShadowPanel.

的 BlurRadius（即 12）匹配的填充（即 12,0,0,0）

另外，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>

演示

如何像在 Edge 中一样为 SplitView.Pane 创建投影

How to create a DropShadow for a SplitView.Pane like in Edge

dropshadow

uwp

uwp-xaml

windows-community-toolkit