One of the easiest ways to make our UI elements pop out of the screen is to add a shadow to them. Each control has an Effect property that is inherited from the UIElement class. We can set an object of type DropShadowEffect to this property to add a shadow to our controls.
However, we must be conservative with the settings that we use on the DropShadowEffect element because this effect can be easily overdone. We also do not want to apply this effect to every control, as that would spoil the overall effect. It is most useful when setting on a panel that contains other controls, or on a border that surrounds such a panel. Let's see a simple example of applying this effect:
<Button Content="Click Me" Width="140" Height="34" FontSize="18">
<Button.Effect>
<DropShadowEffect Color="Black" ShadowDepth="6" BlurRadius="6"
Direction="270" Opacity="0.5" />
</Button.Effect>
</Button>
Let's see what the output of this code looks like:
In this example, we have a standard button with a DropShadowEffect element that is set as its Effect property. As we'll see later in in this chapter, the DropShadowEffect class has a number of uses, but its primary use is to create shadow effects.
When using this element for shadow effects, we generally want to set its Color property to black and its Opacity property to a value that is at least semi-transparent for best, or most realistic, results. The ShadowDepth property dictates how far from the element the shadow should fall. Along with the BlurRadius property, this property is used to add a sense of height to the element.
The BlurRadius property spreads out the shadow area while also making it less dense. Like the ShadowDepth property, this property has a default value of five. The Direction property specifies which direction the shadow should fall in, with a value of zero degrees making the shadow fall to the right and increasing values moving the shadow angle anti-clockwise.
Note that a value of 270 makes the shadow fall directly below the applied control and is often most suitable for use in business applications. Using this angle results in what appears to be an element that is hovering slightly above, or in front of, the screen, with a light source coming from above, which is the most natural direction for light to come from.
In contrast to this, an angle of 45 degrees for example, would place the shadow to the top right of the element and this would have the effect of telling the brain that there is a light source to the bottom left. However, this particular effect is unnatural looking and can detract from, rather than add to the styling of an application.