Smooth transition from image to image

Question

Here is my XAML:

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate>
      <Image x:Name="Expander_Normal"
             Source="/Images/arrow-e.tiff" Width="13" Height="13" />
      <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
          <Setter x:Name="Expander_Expanded"
                  TargetName="Expander_Normal" Property="Source"
                  Value="/Images/arrow-s.tiff" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>

The transition from image to another image is very rough and I don't really like it. So how can I make the transitions smooth.
UPDATE:
Maybe instead of changing the image, maybe ROTATE the image. The main image looks like >. So maybe rotate it down (90 degrees clockwise)

Answer 1

If you want to go fancy, you could:

1. Add a story board
2. Use a double animation on opacity to fade out the image box
3. Change the image
4. Use another double animation to fade in the image box

---

UPDATE

To rotate the image:

1. Add a rotate transform to the image
2. Use a double animation on the rotate transform's angle property

See http://www.vbforums.com/showthread.php?t=555120 for an example