Popup WPF Image with Drop Shadow

Make any image in WPF pop up and hit you in the face!

Since WPF makes it extremely easy to create and share styles for various objects in XAML, I wanted to share some of the more useful or good-looking styles that I have created.

In order to give my image-buttons a more Windows friendly look in WPF, I have created the following style:

<Style TargetType="{x:Type Image}">
  <Setter Property="RenderTransform">
    <Setter.Value>
      <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Setter.Value>
  </Setter>
  <Setter Property="BitmapEffect">
    <Setter.Value>
      <DropShadowBitmapEffect Color="Black" Direction="315" 
         Opacity="0" ShadowDepth="3" Softness="0" />
    </Setter.Value>
  </Setter>
  <Setter Property="RenderTransformOrigin" Value=".5,.5" />
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
               To="1.5" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
               To="1.5" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity" 
               To=".5" Duration="0:0:0.1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
               To="1" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
               To="1" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity" 
               To="0" Duration="0:0:0.1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>
    </Trigger>
  </Style.Triggers>
</Style>

I mainly use this style on my toolbar buttons, but you can customize it so that you can use it anywhere and have it look great.

Here is a sample button in its normal state:

Here is a sample button when the mouse is over the image (with some minor modifications, you can have the image pop up when the mouse is over the button itself):

Note: This style sets the image properties for the entire Window when put in the Window.Resources section of your XAML file. If you want to style just specific images, give the style a key instead of just specifying a type. That way you can apply the style to only images of your choice:

<Style x:Key="PopupImageStyle" TargetType="{x:Type Image}">    

...

<Image Source="Resources/Open Multiple.ico" Style="{StaticResource PopupImageStyle}" />