How to add a drop shadow for SplitView.Pane

Question

How to add a drop shadow for SplitView.Pane?

I tried DropShadowPanel from the UWP Community Toolkit UI Controls and wrote something like this:

<SplitView DisplayMode="Overlay" PanePlacement="Right" Grid.Column="1" HorizontalAlignment="Stretch">
    <SplitView.Pane>
        <controls:DropShadowPanel>
            <Frame Name="DetailsFrame" />
        </controls:DropShadowPanel>
     </SplitView.Pane>
 </SplitView>

However, the shadow appears inside the pane, while I want it to be outside SplitView.Pane, wrapping it. How can I implement that? Thanks!

score 1 · Accepted Answer · answered Apr 17 '17 at 03:03

The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup. You can control the following property of the drop shadow effect : Offset, Color, Opactity and Blur Radius.

I did not find that you have set property of the DropShadowPanel . If all the property of the DropShadowPanel are default value, the DropShadowPanel will have no effect as except. You could create DropShadowPanel by the following code. And this is official code sample you could refer to.

 <SplitView.Pane>
     <control:DropShadowPanel  BlurRadius="5" ShadowOpacity="0.5" Color="Black" OffsetX="10" OffsetY="10" VerticalAlignment="Center"
                       HorizontalAlignment="Center">
         <TextBlock Text="Pane"
        FontSize="24"
        VerticalAlignment="Center"
        HorizontalAlignment="Center" />
     </control:DropShadowPanel>
 </SplitView.Pane>

How to add a drop shadow for SplitView.Pane

1 Answers1

Linked