Transforms, Opacity Masks and Animation to Create an Animated Reflection in WPF/E

I read a great artice about Use Transforms and Opacity Masks to Create a Reflection in WPF/E and tried to add some animation for the gear image. WPF/E is really easy, and you don't need any JavaScript experience to do all this stuff, it is all WPF/E content only.

What did I change to get it running?

I added a Canvas tag around the second image. I need this because I don't want to have the OpacityMask to turn around like the image itself. So, the OpacityMask is now applied to the Canvas.

    Canvas.Left="75" Canvas.Top="198"
    x:Name="test" Width="121" Height="121">
      <LinearGradientBrush StartPoint="0.0,0.0" EndPoint="0.0,1.0">
        <GradientStop Offset="0.0" Color="#CC000000" />
        <GradientStop Offset="0.4" Color="#66000000" />
        <GradientStop Offset="0.8" Color="#00000000" />

    <!-- here comes the image tag --> 


To get the two (the original gear and the reflection one) turn around I added two DoubleAnimation to BeginStoryboard:

  <EventTrigger RoutedEvent="Canvas.Loaded">
          <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" 
Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever"/> <DoubleAnimation x:Name="hourAnimation2" Storyboard.TargetName="hourHandTransform2"
Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers>

Have a look at the example online: or download the files at

1 Comment

Comments have been disabled for this content.