CODEWITHSUNDEEP
c#wpf
mattsven
mattsven

Reputation: 23303

DropShadowEffect on Rectangle with slight transparency - how to make shadow not show inside fill?

I have a DropShadowEffect on a Rectangle with a fill that's slightly transparent. The problem is, the drop shadow also shows up inside the fill, which is what I don't want. Anyways to solve this? I tried this, but it doesn't work for me :/

Upvotes: 1

Views: 1534

Answers (1)

Nayan
Nayan

Reputation: 3224

This is very tricky.

Okay, I don't know the exact answer. But here is what will give you almost the desired effect. Try it.

This is a sample Grid with yellow background. I've drawn two intersecting rectangles of 100x100 dimension on it. You may need to customize the size according to your need. One rectangle is gray rectangle (to show shadow), and the other is a red rectangle (the actual semi-transparent rectangle that you want to display). The shadow depth has been hard coded as 5 pixels here. Please customize it at:

  • RectangleGeometry Rect="5,5,100,100"

  • RectangleGeometry Rect="0,0,95,95"

So, the grid looks like:

<Grid Background="Yellow">
    <!-- A rectangle for shadow -->
    <Rectangle Fill="Gray" Width="100" Height="100" Opacity=".7">
        <Rectangle.Clip>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="5,5,100,100"/>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <RectangleGeometry Rect="0,0,95,95"/>
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Rectangle.Clip>
        <Rectangle.Effect>
            <!-- For nice soft shadow effect -->
            <BlurEffect Radius="5" />
        </Rectangle.Effect>
    </Rectangle>

    <!-- Actual rectangle which is translucent -->
    <Rectangle Fill="Red" Width="100" Height="100" Opacity=".6" >
        <Rectangle.Clip>
            <RectangleGeometry Rect="0,0,95,95"/>
        </Rectangle.Clip>
    </Rectangle>
</Grid>

Update (8-Nov-11):

You can replace the hard-coded width and height by binding them to parent's width and height. Check this SO topic for multiple binding which you will need. More study material on binding: here.

An example of how the XAML snippet will look like is:

<Rectangle Width="{Binding RelativeSource={RelativeSource Self}, Path=Parent.ActualWidth}"
        Height="{Binding RelativeSource={RelativeSource Self}, Path=Parent.ActualHeight}">
</Rectangle>

Since I'm not the expert on data binding, you need to research on your own from here. I feel that you will need your own value-converters for assigning special width ad height (ActualWidth - ShadowDepth kind of stuff (ShadowDepth being 5 pixels here)).

Upvotes: 2

Related Questions