Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Маски непрозрачности

37

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

Свойство OpacityMask принимает любую кисть. Альфа-канал кисти определяет степень прозрачности. Например, если применить кисть SolidColorBrush с установленным прозрачным цветом для OpacityMask, то весь элемент полностью исчезнет. Если использовать SolidColorBrush с непрозрачным цветом, элемент останется полностью видимым. Прочие детали цвета (красный, зеленый и синий компоненты) не имеют значения и при установке свойства OpacityMask игнорируются.

Применение OpacityMask с SolidColorBrush не имеет особого смысла, поскольку тот же эффект может быть достигнут проще — через свойство Opacity. Однако OpacityMask становится более удобным при использовании экзотических типов кистей, таких как LinearGradient или RadialGradientBrush. Используя градиент, который выполняет переход от сплошного к прозрачному цвету, можно создать эффект постепенного "исчезновения" поверхности элемента, как в следующем примере с кнопкой:

<Button Background="Purple" FontSize="14" FontWeight="Bold">
        <Button.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="Black"></GradientStop>
            <GradientStop Offset="1" Color="Transparent"></GradientStop>
          </LinearGradientBrush>
        </Button.OpacityMask>
        <Button.Content>A Partially Transparent Button</Button.Content>
</Button>
Кнопка с переходом от сплошного цвета к прозрачности

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

<Grid Margin="10" Grid.IsSharedSizeScope="True" VerticalAlignment="Center">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" SharedSizeGroup="Row"></RowDefinition>
      <RowDefinition SharedSizeGroup="Row"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBox Name="txt" FontSize="30">Here is some reflected text</TextBox>
    <Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5">
      <Rectangle.Fill>
        <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush>
      </Rectangle.Fill>
      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Offset="0.3" Color="Transparent"></GradientStop>
          <GradientStop Offset="1" Color="#44000000"></GradientStop>
        </LinearGradientBrush>
      </Rectangle.OpacityMask>
      <Rectangle.RenderTransform>
        <ScaleTransform ScaleY="-1"></ScaleTransform>
      </Rectangle.RenderTransform>
    </Rectangle>
  </Grid>
Эффект отражения

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

Наряду с градиентными кистями и VisualBrush свойство OpacityMask часто используется вместе с кистью DrawingBrush. Она позволяет применять к элементу прозрачную область определенной формы.

Пройди тесты