Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Popup WPF Image with Drop Shadow

0.00/5 (No votes)
20 May 2011 1  
Make any image in WPF pop up and hit you in the face!

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:

XML
<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:

button-off

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):

button-on

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:

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

...

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here