#439 – Using a DropShadow with a Border, part II

I described earlier how you can use two sibling Border elements to end up with the effect of a Border with a DropShadow.  We did this because specifying a DropShadowEffect for a Border will lead to all of the child elements contained in the Border getting the same drop shadow.

A cleaner way to avoid the drop shadows on the child elements is to just specify a value for the Background property of the original parent Border, so that it becomes opaque.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4"
                    Background="{x:Static SystemColors.ControlLightLightBrush}">
            	<Border.Effect>
            		<DropShadowEffect/>
            	</Border.Effect>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are everywhere"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>


You can get some nice effects by using the combination of a gradient fill for the background along with a drop shadow.

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #439 – Using a DropShadow with a Border, part II

  1. Pingback: Dew Drop – November 29, 2011 | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: