DropShadowPanel XAML Control

The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup.

Syntax

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:DropShadowPanel BlurRadius="4.0" ShadowOpacity="0.70"
                          OffsetX="5.0" OffsetY="5.0" Color="Black">
    <Image Width="200" Source="Unicorn.png" Stretch="Uniform"/>
</controls:DropShadowPanel>

Sample Output

DropShadowPanel animation

Properties

Property Type Description
BlurRadius double Gets or sets the blur radius of the drop shadow
Color Color Gets or sets the color of the drop shadow
IsSupported bool Gets a value indicating whether the platform supports drop shadows
OffsetX double Gets or sets the x offset of the drop shadow
OffsetY double Gets or sets the y offset of the drop shadow
OffsetZ double Gets or sets the z offset of the drop shadow
ShadowOpacity double Gets or sets the opacity of the drop shadow

Examples

  • Use IsSupported property to verify the availability of drop shadow and take necessary action if not available

    if(!DropShadowPanel.IsSupported)
    {
        // Change something to counter the lack of drop shadow
    }
    
    If Not DropShadowPanel.IsSupported Then
        ' Change something to counter the lack of drop shadow
    End If
    

Sample Project

DropShadowPanel Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Default Template

DropShadowPanel XAML File is the XAML template used in the toolkit for the default styling.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API