Отобразите отражение в Silverlight 4
Я разрабатываю функцию прокрутки продукта, где информацию о продуктах (образ товара, Имя, цена) покажут рядом горизонтально. я должен показать изображение продукта и также его отражения. под отраженным изображением я должен показать Имя Напоминания и его цену. Проблема здесь, я не хочу показывать полное отраженное изображение.
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>
Любые указатели даже высоко ценятся
2 ответа
Для масштабного преобразования вместо -1 можно использовать значение .2, поскольку вы хотите, чтобы высота объекта составляла 20%.
Как указывает Джефф, чтобы сжать отраженное изображение до 20% от высоты оригинала, необходимо ScaleTransform с ScaleY значением -0.2. Проблема в том, что преобразования рендеринга происходят после выделения слота компоновки для элемента. Следовательно, если просто установить существующее значение ScaleY, то изображение высотой 20% останется плавающим посреди того же 100% пространства, которое нужно нетрансформированному изображению.
Элемент управления Silverlight Toolkit 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 соответствующим образом уменьшенные требования к высоте.