Главная » Silverlight » Прозрачность и частичная прозрачность в Silverlight

0

В примерах, обсуждавшихся до сих пор, все фигуры были непрозрачными. Однако Silverlight поддерживает частичную прозрачность. Это означает, что если вывести раз­ные элементы один поверх другого и присвоить им разные степени прозрачности, ни­жележащие элементы будут видны сквозь вышележащие. Это позволяет создавать раз­личные визуальные эффекты, в том числе анимированные.

Существует несколько способов сделать элемент полупрозрачным.

•       Установка свойства Opacity элемента. Оно может принимать значения от О до 1. При значении 1 (установлено по умолчанию) элемент непрозрачный, а при значении 0 — полностью прозрачный. Свойство Opacity определено в классе UIElement, поэтому оно присуще всем элементам.

•       Установка свойства Opacity кисти. Как и элементы, классы кистей содержат свойство Opacity, позволяющее сделать заливку полупрозрачной. Кисть можно использовать для заполнения части элемента.

•       Использование полупрозрачных цветов. Любой цвет со значением alpha, меньшим 25 5, выводится полупрозрачным. Полупрозрачные цвета можно ис­пользовать для заполнения фона, переднего плана или рамки элемента.

•       Установка свойства OpacityMask. Маска позволяет сделать заданную область элемента прозрачной или полупрозрачной. Например, ее можно использовать для создания плавного перехода от прозрачной области к непрозрачной.

На рис. 9.5 продемонстрировано использование первых двух способов создания по­лупрозрачных элементов.

В данном примере фон контейнера Grid верхнего уровня заполнен растровым изо­бражением с помощью кисти ImageBrush. Свойство Opacity контейнера StackPanel равно 0 .7, в результате чего просматривается нижележащий цвет (в данном случае он белый, и рисунок всего лишь немного осветляется).

<Grid Margin="5" 0pacity="0.7"> <Grid.Background>

clmageBrush ImageSource="celestial.jpg" /> </Grid.Background>

</Grid>

Рис. 9.5. Страница, содержащая полупрозрачные элементы

В кнопке используется полупрозрачный красный цвет фона, установленный с по­мощью свойства Background. Изображение видно сквозь кнопку, однако текст кнопки непрозрачный (если бы свойство Opacity было установлено и для фона, и для переднего плана, текст кнопки тоже был бы полупрозрачным). Ниже приведена разметка кнопки.

<Button Foreground="Green" Background="#60AA4030" FontSize="16" Margin="10"

Padding="20" Content="Полупрозрачная кнопка"></Button>

Примечание. В Silverlight применяется цветовой стандарт ARGB, в котором для описания каждого цвета используется четыре значения. Каждое значение должно быть целым числом в диапазоне от 0 до 255. Первое значение (alpha) определяет степень прозрачности. При значении О цвет полностью прозрачный, а при значении 1 — непрозрачный. Значения RGB определяют интенсивность красного, зеленого и синего компонентов цвета.

Следующий элемент — TextBlock. По умолчанию все элементы TextBlock имеют полностью прозрачный фон. В данном примере прозрачность фона оставлена установ­ленной по умолчанию, но свойство Opacity делает текст полупрозрачным. Этого же эффекта можно достичь, установив для свойства Foreground белый цвет с ненулевым значением alpha.

<TextBlock Grid.Row="l" Margin="10" TextWrapping="Wrap" Foreground="White" 0pacity="0.3" FontSize="38" FontFamily="Arial Black"

Text="полупрозрачный текст"></TextBlock>

Последним размещен вложенный элемент Grid, который содержит два элемента в одной ячейке, один поверх другого (для перекрытия двух элементов можно также ис­пользовать элемент Canvas, позволяющий точно позиционировать содержимое). Внизу размещен полупрозрачный элемент Image с изображением шутливой мордочки. В нем тоже установлено свойство Opacity, позволяющее видеть сквозь него нижележащее изо­бражение. Поверх обоих изображений размещен элемент TextBlock с полупрозрачным текстом. Сквозь буквы видны оба изображения. Ниже приведена разметка изображения.

clmage Grid.Row="2" Margin="10" Source="happyface.jpg" Opacity="0.5" ></Image>

Можно накладывать одно поверх другого произвольное количество изображений и элементов, сделав их полупрозрачными. Конечно, при этом ухудшается быстродей­ствие прорисовки, особенно если в приложении применяются динамические эффекты, такие как анимация. Кроме того, если полупрозрачных слоев более трех, сквозь них ста­новится тяжело что-либо увидеть.

Маска

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

Свойство OpacityMask может принимать любую кисть. Значение alpha кисти опре­деляет степень прозрачности. Например, если для маски используется кисть Solid­ColorBrush с полностью прозрачным цветом, элемент будет невидим. Если же в ки­сти задан непрозрачный цвет, элемент останется видимым. Другие параметры цвета (интенсивности красного, зеленого и синего компонентов) при установке свойства OpacityMask игнорируются.

Использовать маску с кистью SolidColorBrush нерационально, потому что того же эффекта легче достичь с помощью свойства Opacity. Маска OpacityMask полезна с другими типами кистей, такими как LinearGradientBrush или RadialGradientBrush. С помощью градиентов, переходящих от прозрачного к непрозрачному цвету, можно создать эффект плавной прорисовки элемента.

<Button FontSize="14" FontWeight="Bold" C0ntent="частично прозрачная кнопка"> <Button.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="l,0"> <GradientStop 0ffset="0" Color="Transparent"> </GradientStop>

<GradientStop 0ffset="0.8" Color="Black"> </GradientStop> </LinearGradientBrush> </Button.OpacityMask>

</Button>

Результат показан на рис. 9.6. Сквозь кнопку плавно прорисовывается пианино.

Рис. 9.6. Кнопка с маской

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

По теме:

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