Creating Image Reflection In WPF

Today, I just come across Joseph Cooney's blog article on how to create an image reflection in WPF without having to hard-code the width and height, and he uses data binding and converter to do the trick, although this works fine, but still not as clean as we expect. Actually we can use VisualBrush.RelativeTransform instead of VisualBrush.Transform to flip the image, RelativeTransform allows us to specify relative values to the transform:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Viewbox>
    <StackPanel Margin="10">
      <Border BorderBrush="White" BorderThickness="8" Width="400" Height="300">
        <Image Source="f:\My Documents\Whidbey\Xaml\bird.jpg" Name="myVisual" Stretch="Fill"/>
      </Border>
      <Border BorderBrush="White" BorderThickness="8" Width="400" Height="300">
        <Border.RenderTransform>
          <SkewTransform CenterX="0" CenterY="0" AngleX="-50" AngleY="0"/>
        </Border.RenderTransform>
        <Border.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0" Color="#FF000000"/>
              <GradientStop Offset="0.8" Color="#00000000"/>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Border.OpacityMask>
        <Border.Background>
          <VisualBrush Visual="{Binding ElementName=myVisual}">
            <VisualBrush.RelativeTransform>
              <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="0.5" CenterY="0.5"/>
            </VisualBrush.RelativeTransform>
          </VisualBrush>
        </Border.Background>
      </Border>
    </StackPanel>
  </Viewbox>
</Page>

And here comes the screenshot of this Page: