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

Question

I am currently trying to create a SplitView.Pane that looks kinda like the edge browser history/favourites pane. Therefore, I need a shadow at the (left) border of my SplitView.Pane.

To create the shadow, I use the DropShadowPanel from the UWP Toolkit. The idea is something like this (doesn't work, of course):

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

The shadow should be outside the panel. How do I get this done?

This is how the shadow should look like:

How it should look like

EDIT: The DropShadow should be OUTSIDE the pane. The duplicate-post's answer creates a shadow inside the pane. Unless i miss something there.

Looks like already asked question or duplicate of this https://stackoverflow.com/questions/43395093/how-to-add-a-drop-shadow-for-splitview-pane — Shubham Sahu, Sep 16 '17 at 17:58
Possible duplicate of [How to add a drop shadow for SplitView.Pane](https://stackoverflow.com/questions/43395093/how-to-add-a-drop-shadow-for-splitview-pane) — Shubham Sahu, Sep 16 '17 at 18:00
You're missing out the question the person asked, I'll quote: _However, the shadow appears inside the pane, while I want it to be outside SplitView.Pane, wrapping it. How can I implement that? Thanks!_ — iam.Carrot, Sep 16 '17 at 18:49
Yea, I read that. Yet the answer does not solve my issue since it creates a shadow inside the pane. — Crix, Sep 16 '17 at 19:02

score 4 · Accepted Answer · answered Sep 17 '17 at 05:05

You can't simply apply a shadow to the Pane's direct child as it will appear being cut off. You can of course try overriding the SplitView's style and applying the shadow directly onto the Pane element, but you will soon find out that the PaneRoot has its own Clipping logic defined in XAML, so if you were not careful, you could potentially break its underlying UI logic.

Here's a simple solution that works without modifying the style. The idea is to apply the shadow on an inner element where there's enough space between this element and the Pane's root element for the shadow to spread out.

Assume the PanePlacement is set to Right, then your root element, a Border(i.e. RootBorder), should have a left padding(i.e. 12,0,0,0) that matches the BlurRadius(i.e. 12) of the DropShadowPanel.

Also, the PaneBackground needs to be transparent otherwise it will cover up the shadow. Instead, the background color should then be applied to a container element(i.e. PaneContentGrid) that's inside the root element.

Please see the code below for a simple example -

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>

Demo

Awesome! That does the trick. Many thanks for your detailed solution. — Crix, Sep 17 '17 at 08:22

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

1 Answers1