Главная » Silverlight » Создание эффекта отражения

0

Объекты преобразований позволяют создавать эффекты различных типов. Например, с их помощью можно создать эффект зеркального отражения (рис. 9.12).

Для создания в Silverlight эффекта отражения нужно явно продублировать содержимое. Например, при создании рис. 9.12 были использованы два идентичных элемента Image: один элемент Image содержит исходное изображение, а второй — отраженную копию.

Рис. 9.11. Поворот кнопки

<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition></RowDefinition>

Рис. 9.12. Эффект зеркального отражения

<RowDefinition></RowDefinition> </Grid.RowDefinitions>

<Image Source=" harpsichord. jpg"></Image>

<Image Grid.Row="l" Source=" harpsichord. jpg"></Image>

</Grid>

Необходимость дублировать содержимое приводит к непрактичности данного спосо­ба для элементов управления. Кроме того, в главе 11 описан еще один способ создания эффекта отражения при воспроизведении видеофайлов с помощью кисти VideoBrush.

Отраженную копию нужно немного изменить, чтобы она выглядела, как отражение. Это можно сделать с помощью двух компонентов: объекта преобразования, размещаю­щего отраженное изображение в нужном месте, и маски, плавно выводящей содержи­мое копии.

<Image Grid.Row="l" Source="harpsichord.jpg" RenderTransformC>rigin="0, 0.4"> <Image.RenderTransform>

<ScaleTransform ScaleY="-0.8’!></ScaleTransform> </Image.RenderTransform> <cimage. OpacityMask> «LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="Transparent"> </GradientStop>

<GradientStop Offset="l" Color="#44000000"> </GradientStop> </LinearGradientBrush> </Image.OpacityMask>

</Image>

В данной разметке объект ScaleTransform размещает отраженное изображение в нужном месте с помощью отрицательного значения свойства ScaleY. Чтобы точно от­разить изображение, нужно присвоить ему значение -1. В данном примере свойству ScaleY присвоено значение -0. 8, чтобы изображение не только отразилось, но и немно­го сжалось для большей реалистичности. Для точного размещения отраженной копии нужно явно позиционировать ее с помощью контейнера Canvas или применить свойство RenderTransformOrigin, как в данном примере. Изображение отражено относительно точки 0,0.4. Следовательно, выравнивание влево оставлено прежним (х=0), а смещение равно -0.4. Обратите внимание на то, что отражение выполнено относительно вообра­жаемой горизонтальной линии, расположенной немного выше середины изображения.

Для создания эффекта плавной прорисовки изображения используется кисть LinearGradientBrush. Изображение перевернуто вверх ногами, поэтому объекты GradientStop определены в обратной последовательности.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии