Image reflection in Silverlight 4

Question

I am developing a product scrolling feature where products info( product image, Name, price)will be shown side by side horizontally. i need to show the image of the product and also its reflection. under the reflected image i need to show the Prod Name and its price. The problem here is i dont want to show the complete reflected image.

the oputput should be something like this

Image Height-100%

Reflected Image Height-20%

Product name

Product Price

The above pattern will repeat horizontally.

I am able to get the desired output with some problem. The reflected image is shown up with hieght 100% and the sapce between the actual image and product name is very high.

My reflected image should be a rotated image of the actual image and only half part of the actual image should be shown.

Sample Code so far..

<ListBox Name="testing" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate >
                        <DataTemplate>
                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" >
                                <Image Source="{Binding ImageUrl}" Width="200"/>

                                <Image Source="{Binding ImageUrl}" Width="200" RenderTransformOrigin="0.5,0.5" Opacity="0.3">
                                    <Image.RenderTransform>
                                        <ScaleTransform  ScaleY="-1" ScaleX="1"></ScaleTransform>
                                    </Image.RenderTransform>
                                    <Image.OpacityMask>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#00000000" Offset="0.5"/>
                                            <GradientStop Color="#FFFFFFFF" Offset="1.0"/>
                                        </LinearGradientBrush>
                                    </Image.OpacityMask>
                                </Image>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" />
                                    <TextBlock Text="{Binding Price}" HorizontalAlignment="Center"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Any pointers even is highly appreciated

Answer 1

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.

Answer 2

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.