文章/答案/技术大牛

发布

社区首页 >问答首页 >银光4中的图像反射

问银光4中的图像反射
EN

Stack Overflow用户

提问于 2010-05-01 07:42:29

回答 2查看 1K关注 0票数 1

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

oputput应该类似于

图像高度-100%

反射图像高度-20%

产品名称

产品价格

上面的模式将水平地重复。

我能够得到期望的输出与一些问题。反射图像以100%的高度显示，实际图像与产品名称之间的边长很高。

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

到目前为止样本代码..。

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

任何指点甚至都会受到高度赞赏。

c#-3.0

silverlight-4.0

silverlight

回答 2

Stack Overflow用户

发布于 2010-05-01 23:21:04

对于缩放转换，而不是-1，您可能希望使用类似于.2的值，因为您希望它是对象高度的20%。

票数 1

Stack Overflow用户

发布于 2010-05-03 11:26:10

正如Jeff指出的，为了将反射的图像压缩到原始高度的20%，您需要一个ScaleY值为-0.2的ScaleY。问题是呈现转换发生在分配的元素的布局槽之后。因此，只要设置现有的ScaleY值，就会在未转换的图像所需的100%空间的中间，留下20%的高度图像。

Silverlight工具包LayoutTransformer控件的设计允许在为控件分配布局槽之前将转换应用于内容。然后，它可以将转换后所需的实际空间告知容器。

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

        <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报告适当降低的身高要求。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2749218

复制

相似问题

问银光4中的图像反射
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问银光4中的图像反射EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问银光4中的图像反射
EN