Image reflection in Silverlight 4

Answer 1

For your scale transform, instead of -1, you may want to use a value like .2 since you want it to be 20% the height of the object.

Answer 2

As Jeff points out in order to compress the reflected image to 20% of the originals height you need a ScaleTransform with a ScaleY value of -0.2. The problem is that Render Transforms occur after the layout slot for the element as been allocated. Hence just setting you existing ScaleY value just leaves a 20% height image floating in middle of the same 100% space that the un-transformed image needs.

The Silverlight Toolkit LayoutTransformer control is designed to allow transforms to be applied to content before the layout slot for the control has been allocated. It can then inform its container of the actual space needed post transform.

With this control available change your second (reflected) image element to this:-

        <toolkit:LayoutTransformer >
            <toolkit:LayoutTransformer.LayoutTransform>
                <ScaleTransform ScaleY="-0.2" ScaleX="1" />
            </toolkit:LayoutTransformer.LayoutTransform>
            <Image Source="Test.png" Width="200"  Opacity="0.9">
                <Image.OpacityMask>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#00000000" Offset="0.1"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1.0"/>
                    </LinearGradientBrush>
                </Image.OpacityMask>
            </Image>
        </toolkit:LayoutTransformer>

I've tweaked some of the opacity values to make the effect more visible. Now the LayoutTransformer is performing the 20% scale and then reporting to the containing StackPanel the appropriately reduced height requirements.