DropShadowEffect WPF

Question

I am new to WPF/XAML coding. I am trying to add a drop shadow effect to a Rectangle shape. The XAML for the rectangle is:

CODE 1

<Rectangle HorizontalAlignment="Left" Height="552" Margin="2,10,0,0" 
             VerticalAlignment="Top" Width="427" StrokeThickness="4" 
             Fill="#FF484A4D" Grid.Column="1"/>

The code for DropShadowEffect is:

CODE 2

<Rectangle.Effect>
    <DropShadowEffect x:name="Dshadow" BlurRadius="10" ShadowDepth="0" Color="Black"/>
</Rectangle.Effect>

The problem is, I can't combine/use these two codes together. When I arrange CODE 2 after CODE 1, it doesn't work. How should I fix/arrange these codes?

score 6 · Accepted Answer · 2017-12-06T07:00:41.677

6

You should not close your Rectangle at the first line.

<Rectangle HorizontalAlignment="Left" 
           Height="552" 
           Margin="2,10,0,0" 
           VerticalAlignment="Top" 
           Width="427" 
           StrokeThickness="4" 
           Fill="#FF484A4D" 
           Grid.Column="1">
     <Rectangle.Effect>
         <DropShadowEffect BlurRadius="10" 
                           ShadowDepth="0" 
                           Color="Black"/>
     </Rectangle.Effect>    
 </Rectangle>

You need to access a Property of Rectangle - you cannot do that if you have already closed that Element.

edited Dec 06 '17 at 07:00

answered Dec 06 '17 at 06:39

**The property "name" doesn't exist in www.schemas.microsoft.com/winfx/xaml namespace** - This is what i get – Software Dev Dec 06 '17 at 06:42
1

remove that `x:name` from that effect – Dec 06 '17 at 06:43

score 0 · Answer 2 · edited Feb 17 '23 at 17:23

The Rectangle.Effect has to be declared inside the Rectangle component tag.

<Rectangle>
    <Rectangle.Effect>
        <DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Black"/>
    </Rectangle.Effect>    
</Rectangle>

Alternatively, you can declare a Style tag in your XAML which can be reused for the components again and again. Below is an example of a style sheet, which will automatically add the effect to all Rectangles in the XAML.

<Window.Resources>
   <Style TargetType="{x:Type Rectangle}">         
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect x:Name="shadowEffectButton" Color="Black" ShadowDepth="0" BlurRadius="5"/>
            </Setter.Value>
        </Setter>

       <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Effect.ShadowDepth" From="0" To="3" Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>

                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Effect.ShadowDepth" From="3" To="0" Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>

            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

DropShadowEffect WPF

2 Answers2