Silverlight 4中的图像反射

我正在开发一个产品滚动功能，其中产品信息（产品图像、名称、价格）将水平并排显示。我需要展示产品的形象和它的反映。在反射图像下，我需要显示产品名称及其价格。 这里的问题是我不想显示完整的反射图像

oputput应该是这样的

图像高度-100% 反射图像高度-20% 产品名称 产品价格 上述模式将水平重复。

我能够通过一些问题获得所需的输出。反射图像显示高度为100%，实际图像与产品名称之间的sapce非常高

我的反射图像应该是实际图像的旋转图像，并且只显示实际图像的一半

到目前为止的示例代码

<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>

---

对于您的缩放变换，任何指针都会受到高度赞赏，而不是-1，您可能希望使用像.2这样的值，因为您希望它是对象高度的20%。

正如Jeff指出的那样，为了将反射图像压缩到原始高度的20%，您需要一个

ScaleTransform

的

ScaleY

值为-0.2。问题在于，渲染变换发生在已分配元素的布局槽之后。因此，只需设置现有的

ScaleY

值，即可使20%高度的图像浮动在未转换图像所需的100%空间的中间

控件的设计允许在分配控件的布局槽之前将转换应用于内容。然后，它可以通知其容器变换后所需的实际空间

使用此控件，将第二个（反射的）图像元素更改为：-

        <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>

---

我已经调整了一些不透明度值，以使效果更明显。现在，

LayoutTransformer

正在执行20%比例，然后向包含

StackPanel

的人员报告适当降低的高度要求

展示到目前为止在问题中添加代码的xaml是的，这很简单，需要更多的工作来提供所需的结果。这将涉及到使用工具箱的

LayoutTranformer

我从来都不是一个不鼓励使用工具箱的人；-）但我有偏见杰夫，我无法想象你为什么会对工具箱有偏见；）使用

LayoutTransformer

，完整的解决方案实际上非常简单。