DropShadowPanel Control In UWP

DropShadowPanel Control allows the creation of a drop shadow effect for any XAML FrameworkElement in the markup. The DropShadowPanel is from UWP Community Toolkit that is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks while building UWP apps for Windows 10.

Reading this article, you can learn how to use DropShadowPanel Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017
3. Windows Anniversary Update (10.0.14393.0) is needed to support correctly this Shadow effect.

Step 1

Open Visual studio 2017. Go to Start -> New Project-> select Windows Universal (under Visual C#) -> Blank App (Universal Windows) -> Give a suitable name for your App (UWPDropShadowPanel) -> OK.

 

After choosing the target and minimum platform version that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

 

Step 2

First, update the reference Microsoft.NETCore.UniversalWindowsPlatform with the latest version of it, using the Manage NuGet Packages so as to adding the UWPToolKit Control.

Step 3

Add the following controls in design window for DropShadowPanel control effect view.

Text Shadow

Add the TextBlock Control and change the name and text properties.

Add the DropShadowPanel Control and change the Name, OffsetX, OffsetY, Color, ShadowOpactity and Blur Radius properties for Text Shadow.

<TextBlock x:Name="tblText" HorizontalAlignment="Left" Margin="50,152,0,0" TextWrapping="Wrap" Text="Text Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
<Controls:DropShadowPanel x:Name="DSPText" Height="122" Margin="30,0,958,30" BlurRadius="0.0" ShadowOpacity="0.74" OffsetX="10.0" OffsetY="50.0" Color="Black">
    <TextBlock Margin="0,36,0,0" TextWrapping="Wrap" Text="The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup." VerticalAlignment="Top" />
</Controls:DropShadowPanel>

 

Image shadow

Add the TextBlock Control and change the name and text property. Add an image to Assets for DropShadowPanel control Image Effect.

Add the DropShadowPanel Control and change the Name, OffsetX, OffsetY, Color, ShadowOpactity and Blur Radius properties for Image Shadow.

<TextBlock x:Name="tblImage" HorizontalAlignment="Left" Margin="50,0,0,0" TextWrapping="Wrap" Text="Image Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
<Controls:DropShadowPanel x:Name="DSPImage" Height="122" Margin="30,0,958,30" BlurRadius="0.0" ShadowOpacity="0.50" OffsetX="60.0" OffsetY="0" Color="Green">
    <Image Width="170" Source="Assets/Unicorn.png" Stretch="Uniform" Margin="0,10,0,46" />
</Controls:DropShadowPanel>

 

Shape shadow

Add the TextBlock Control and change the Name and Text property.

Add the DropShadowPanel Control and change the Name, OffsetX, OffsetY, Color, ShadowOpactity and Blur Radius properties for Shape Shadow.

<TextBlock x:Name="tblShape" HorizontalAlignment="Left" Margin="50,0,0,0" TextWrapping="Wrap" Text="Shape Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>
<Controls:DropShadowPanel x:Name="DSPPolyline" Height="122" Margin="30,0,958,30"BlurRadius="0.13" ShadowOpacity="0.70" OffsetX="10.0" OffsetY="50" Color="Blue">
   <Polyline Points="0,0 50,50 50,0 0,50" Stroke="Black" StrokeThickness="2"/>
</Controls:DropShadowPanel>

 

Note

Automatically, the following code will be generated in XAML code view, while we are done in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPDropShadowPanel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPDropShadowPanel.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="68,37,0,0" TextWrapping="Wrap" Text="DropShadowPanel in UWP" VerticalAlignment="Top" Height="50" Width="472" FontSize="36" FontWeight="Bold" />
        <StackPanel>
            <TextBlock x:Name="tblText" HorizontalAlignment="Left" Margin="50,152,0,0" TextWrapping="Wrap" Text="Text Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
            <Controls:DropShadowPanel x:Name="DSPText" Height="122" Margin="30,0,958,30" BlurRadius="0.0" ShadowOpacity="0.74" OffsetX="10.0" OffsetY="50.0" Color="Black">
                <TextBlock Margin="0,36,0,0" TextWrapping="Wrap" Text="The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup." VerticalAlignment="Top" /> </Controls:DropShadowPanel>
            <TextBlock x:Name="tblImage" HorizontalAlignment="Left" Margin="50,0,0,0" TextWrapping="Wrap" Text="Image Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
            <Controls:DropShadowPanel x:Name="DSPImage" Height="122" Margin="30,0,958,30" BlurRadius="0.0" ShadowOpacity="0.50" OffsetX="60.0" OffsetY="0" Color="Green">
                <Image Width="170" Source="Assets/Unicorn.png" Stretch="Uniform" Margin="0,10,0,46" /> </Controls:DropShadowPanel>
            <TextBlock x:Name="tblShape" HorizontalAlignment="Left" Margin="50,0,0,0" TextWrapping="Wrap" Text="Shape Shadow Effect" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
            <Controls:DropShadowPanel x:Name="DSPPolyline" Height="122" Margin="30,0,958,30" BlurRadius="0.13" ShadowOpacity="0.70" OffsetX="10.0" OffsetY="50" Color="Blue">
                <Polyline Points="0,0 50,50 50,0 0,50" Stroke="Black" StrokeThickness="2" /> </Controls:DropShadowPanel>
        </StackPanel>
    </Grid>
</Page>

Step 4

Deploy your app on Local Machine. The output of the UWPDropShadowPanel is given below.
Summary

Now, you have successfully tested DropShadowPanel Control in XAML and UWP environment using Visual Studio 2017.