Michaels Blog | 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^[1] 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.

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; }

.csharpcode .lnum { color: #606060; }

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Canvas.Left="75" Canvas.Top="198" x:Name="test" Width="121" Height="121"> <Canvas.OpacityMask> <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" /> </LinearGradientBrush> </Canvas.OpacityMask>

</Canvas> </pre>

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