[Performance tips] Use the system shadows instead of your own

Today, I am going to give you a fast and easy tip about shadows and performance.

In a project I recently made, we told the designer not to use BitmapEffects because they are performance killers. He decided to create its own shadows by duplicating each shape and make them look like shadows (designer magic, voodoo things, etc...). I was then surprised to see that it kills performance too!

There is still the shaders effect which came with the 3.5 SP1 framework but they will be available only on Vista or greater platforms and their performance will depend on your graphic cards.

But we have another ace in our deck: the system shadow which is quite fast even on software rendering!

Using it is quite easy:

1. Add the PresentationFramework.Aero reference to your project
2. Add the following XML namespace:
   Java

   clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

3. Use the SystemDropShadowChrome element available with this namespace!

But there is a drawback: you can only produce squared shadows. However, you can still play with the CornerRadius property to create similarly round shadows.

Here is a small example of XAML code:

<UniformGrid
    xmlns:shadows="clr-namespace:Microsoft.Windows.Themes;
	assembly=PresentationFramework.Aero"
    Columns="2">
  <shadows:SystemDropShadowChrome Margin="25">
    <ListBox>
      <ListBoxItem Content="One item" />
      <ListBoxItem Content="Another item" />
      <ListBoxItem Content="Another third item" />
    </ListBox>
  </shadows:SystemDropShadowChrome >
 
  <shadows:SystemDropShadowChrome Margin="25" 
	CornerRadius="800" Width="100" Height="100">
    <Ellipse Stroke="Black" Fill="White" />
  </shadows:SystemDropShadowChrome>
</UniformGrid>