Question

I have an image with a shadow property defined as follows.

 <Border Background="Black" Margin="42,180,368,38">
   <Border.Effect>
     <DropShadowEffect Color="Aqua"  Opacity="0.5"/>
   </Border.Effect>

   <Image Height="92" Width="97" Source="/Images/image_search.png" />
 </Border>

This produces image with a border. OK. But, I need the border to be shown only on image-hovering? How do I do that ? Also, how to blur the image on-hovering upon it?

Many Thanks.

Answer 1

You can do this with styles and triggers.

    <Border Margin="42,180,368,38"> 
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="BorderThickness" Value="0"/>
                  <Style.Triggers>
                    <Trigger Property="Border.IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>                            
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect Color="Aqua"  Opacity="0.5"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>            
        <Image Height="92" Width="97" Source="/Images/image_search.png" />
    </Border>    

The first Setter within the Style explicitly sets the background color to null and the border thickness to ‘0’ to “hide” the border. The Trigger sets the borders background property when the IsMouseOver Property of the border control is set to true.