3

我目前正在尝试创建一个看起来有点像边缘浏览器历史/收藏夹窗格的 SplitView.Pane。因此，我需要在 SplitView.Pane 的（左）边界处有一个阴影。

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

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

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

阴影应该是这样的：

它应该是什么样子

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

4

1 回答 1

4

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

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

假设PanePlacement设置为Right，那么您的根元素 a Border(ie RootBorder) 应该有一个与 的(ie )匹配的左填充 (ie ) 。12,0,0,0BlurRadius12DropShadowPanel

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

演示

在此处输入图像描述

于 2017-09-17T05:05:44.847 回答