Material Design Shadows in WPF

This post will demonstrate how to implement¬†Google’s new Material Design principles¬†in WPF. First, we’ll tackle the Cards/Modal shadows, seen below.


Their shadows consist of two layers: a top shadow for depth and a bottom shadow for definition.

Thankfully, it’s possible to achieve a similar effect in WPF by using only one DropShadowEffect on a Border.

Cards-DropShadowEffect-WPF

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Page.Resources>
      <DropShadowEffect x:Key="z-depth1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="#CCCCCC"/>
      <DropShadowEffect x:Key="z-depth2" BlurRadius="8" ShadowDepth="2.5" Direction="270" Color="#BBBBBB"/>
      <DropShadowEffect x:Key="z-depth3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="#BBBBBB"/>
      <DropShadowEffect x:Key="z-depth4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="#BBBBBB"/>
      <DropShadowEffect x:Key="z-depth5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="#BBBBBB"/>
   </Page.Resources>
   <Grid Background="#EEEEEE">
      <StackPanel Orientation="Horizontal">
         <Border Effect="{StaticResource z-depth1}" Width="100" Height="100" Background="White" Margin="25" />
         <Border Effect="{StaticResource z-depth2}" Width="100" Height="100" Background="White" Margin="25" />
         <Border Effect="{StaticResource z-depth3}" Width="100" Height="100" Background="White" Margin="25" />
         <Border Effect="{StaticResource z-depth4}" Width="100" Height="100" Background="White" Margin="25" />
         <Border Effect="{StaticResource z-depth5}" Width="100" Height="100" Background="White" Margin="25" />
      </StackPanel>
   </Grid>
</Page>

To use with a Left/Right Nav or Bottom Toolbar, simply change the Direction of the DropShadowEffect to the appropriate angle (right 0, left 180, top 90, bottom 270).

If you’re interested in reproducing their shadows using two DropShadowEffects, use two controls stacked on an empty Grid or Canvas and apply the effect on both..