Главная » Разработка для Windows Phone 7 » Режимы прозрачности Windows Phone 7

0

UIElement определяет свойство Opacity (Непрозрачность), которое может принимать значения от 0 до 1, обеспечивая элементу (и его потомкам) разные степени прозрачности. Но несколько более интересным является свойство OpacityMask (Маска прозрачности), которое позволяет «скрыть» часть элемента. Значением OpacityMask является объект типа Brush; чаще всего используются один из двух производных от GradientBrush классов. Цвет кисти игнорируется, для определения прозрачности используется только значение альфа- канала.

Например, к свойству OpacityMask элемента Image можно применить RadialGradientBrush:

<Image Source="Images/BuzzAldrin0nTheMoon.png"> <Image.0pacityMask>

<RadialGradientBrush>

<RotateTransform Angle="30" /> </Image.RenderTransform> </Image>

<GradientStop 0ffset="0" Color="White" /> <GradientStop 0ffset="0.8" Color="White" /> <GradientStop 0ffset="1" Color="Transparent" /> </RadialGradientBrush> </Image.0pacityMask> </Image>

Обратите внимание, что RadialGradientBrush непрозрачный в центре и остается непрозрачным до 0,8 радиуса, после чего плавно становится полностью прозрачным к краям круга. Получаем очень интересный эффект, глядя на который не верится, что его можно было создать всего с помощью нескольких строк XAML:

Рассмотрим популярную методику, в которой используются два одинаковых элемента, но к одному из них применяется ScaleTransform, чтобы перевернуть его, и OpacityMask, чтобы сделать его частично размытым:

<Image Source="Images/BuzzAldrinOnTheMoon.png" Stretch="None" VerticalAlignment="Top" /> <Image Source="Images/BuzzAldrinOnTheMoon.png" Stretch="None" VerticalAlignment="Top" RenderTransformOrigin="0.5 1"> <Image.RenderTransform>

<ScaleTransform ScaleY="-1" /> </Image.RenderTransform> <Image.OpacityMask>

<LinearGradientBrush StartPoint="0 0" EndPoint="0 1"> <GradientStop Offset="0" Color="#00000000" /> <GradientStop Offset="1" Color="#40000000" /> </LinearGradientBrush> </Image.OpacityMask> </Image>

Эти два элемента одинакового размера и выровнены по верху и центру. Обычно второй размещается над первым. Но для второго элемента задан RenderTransform со значением ScaleTransform, что переворачивает изображение относительно горизонтальной оси. RenderTransformOrigin задано значение (0.5, 1), что соответствует низу элемента. Таким образом, изображение переворачивается относительно нижнего края. После этого к свойству OpacityMask применяется LinearGradientBrush, что обеспечивает размытие перевернутого изображения:

Заметьте, что значения GradientStop применяются к исходному «неотраженному» изображению, поэтому верхняя часть картинки полностью прозрачная (что соответствует значению #00000000) и затем она отражается в нижнюю часть составного изображения.

Часто вот такие несложные приемы позволяют визуальным элементам заиграть в новом свете для пользователя. Но не стоит злоупотреблять OpacityMask, особенно в сочетании со сложными анимациями, потому что это может иметь негативное влияние на производительность. Возьмите за правило использовать OpacityMask, только если создаваемый эффект действительно того стоит.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

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