#436 – Using a Drop Shadow with a Border

November 23, 2011 2 Comments

If you specify a DropShadowEffect for a Border, all elements within the border will get a drop shadow.

        <Border Margin="10" BorderBrush="Black" BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect/>
            </Border.Effect>
            <StackPanel Orientation="Vertical" Margin="5">
                <Label Content="Staying within borders"/>
                <Button Content="Do It"/>
            </StackPanel>
        </Border>


If you want the drop shadow around only the Border, you can create two sibling borders–one that has the drop shadow but no content and one that has the content and no drop shadow.

        <Grid>
            <Border Margin="10" BorderBrush="Black" BorderThickness="1" Background="White">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="2"/>
                </Border.Effect>
            </Border>

            <Border Margin="10" BorderBrush="Black" BorderThickness="1">
                <StackPanel Orientation="Vertical" Margin="5">
                    <Label Content="Staying within borders"/>
                    <Button Content="Do It"/>
                </StackPanel>
            </Border>
        </Grid>

Filed under Controls Tagged with , , , ,

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

2 Responses to #436 – Using a Drop Shadow with a Border

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

  2. TomB says:
    July 3, 2020 at 6:32 pm

    I used this tip because adding a drop shadow effect to a DataGrid made the scrolling grind to a halt.
    The double border trick allowed me to add a drop shadow effect around the DataGrid without breaking scrolling.

    Reply

Leave a comment