Отражение изображения в Silverlight 4 - PullRequest
Новая
       10

Отражение изображения в Silverlight 4

1 голос
/ 01 мая 2010

Я разрабатываю функцию прокрутки товара, в которой информация о товаре (изображение товара, имя, цена) будет отображаться рядом друг с другом по горизонтали. Мне нужно показать изображение продукта, а также его отражение. под отраженным изображением мне нужно показать название продукта и его цену. Проблема в том, что я не хочу показывать полное отраженное изображение.

значение должно быть примерно таким

Высота изображения-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>

Любые указатели даже высоко ценятся

Ответы [ 2 ]

1 голос
/ 03 мая 2010

Как указывает Джефф, чтобы сжать отраженное изображение до 20% от высоты оригинала, вам нужно ScaleTransform со значением ScaleY -0,2. Проблема заключается в том, что преобразования рендеринга происходят после слота макета для выделенного элемента. Следовательно, просто установив существующее значение ScaleY, вы оставите изображение с 20% -ной высотой плавающим посередине того же 100% пространства, в котором нуждается не преобразованное изображение.

Элемент управления Silverlight Toolout 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 голос
/ 02 мая 2010

Для преобразования масштаба вместо -1 вы можете использовать значение наподобие .2, поскольку вы хотите, чтобы оно составляло 20% высоты объекта.

...