CODEWITHSUNDEEP
c#wpfxaml
Darren Ng
Darren Ng

Reputation: 373

DropShadowEffect with Semi Transparent Grid

I am trying to create a grid (with 30% opacity) and drop shadow from it. I have done a mock up in photoshop and this is what I want to achieve:

Drop Shadow Effect in Photoshop

This is how I tried to implement it in xaml:

<Grid Background="#808080">        
    <Grid Width="100"
          Height="100" 
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
        <Grid Background="White" 
              Opacity="0.3">
            <Grid.Effect>
                <DropShadowEffect />
            </Grid.Effect>
        </Grid>            
    </Grid>
</Grid>

Unfortunately, this is how it turned out:

Drop Shadow Effect in Code

As you can see from the image above, the shadow effect can seen underneath the 30% grid. How do I remove the shadow effect within the grid and only make the shadow appear outside the grid (on the bottom right)?

Upvotes: 0

Views: 284

Answers (1)

Arif Eqbal
Arif Eqbal

Reputation: 3138

Easy solution, drop the opacity. But I guess that would not be acceptable, so another solution which is more of a workaround.

Add a Border inside your inner grid and drop shadow on that border, also make the border thickness disappear on 2 sides on which you do not want the shadow. Something like this:

<Grid Background="White" Opacity="0.3">
      <Border BorderBrush="White" BorderThickness="0,0,1,1">
            <Border.Effect>
                   <DropShadowEffect />
            </Border.Effect>
      </Border>
</Grid>

Upvotes: 2

Related Questions