Автор: Махеш Чанд (Mahesh Chand)

В этой статье показывается, как можно построить прозрачные и полупрозрачные элементы управления в WPF.

Все элементы управления WPF наследуются от UIElement. Для установки прозрачности элемента управления используется свойство Opacity класса UIElement. Значение Opacity находится в диапазоне от 0.0 до 1.0, где 0.0 означает полную прозрачность, а 1.0 — полную непрозрачность.

Следующий фрагмент кода создает элемент управления "Кнопка".

<Button Width="200" Height="30" >
    Click Me!
</Button>

Результат показан на рисунке 1.

Рисунок 1

Следующий код устанавливает значение 50% для свойства Opacity элемента управления "Кнопка".

<Button Width="200" Height="30" Opacity="0.5">
    Click Me!
</Button>

Новый результат показан на рисунке 2.

Рисунок 2

Предположим, что требуется создать кнопку, в которой будет прозрачный фон и непрозрачный текст. Можно использовать свойство Background кнопки.

<Button Width="200" Height="30" >
    <Button.Background>
        <SolidColorBrush Color="Gray" Opacity="0.50" />
    </Button.Background>
    Click Me!
</Button>

Новый результат показан на рисунке 3.

Рисунок 3

Теперь предположим, что требуется создать кнопку, в которой будет прозрачный фон, но содержимое должно быть непрозрачным. Для установки значения Opacity можно просто использовать свойство Background кнопки.

<Button Width="200" Height="30" >
    <Button.Background>
        <SolidColorBrush Color="Gray" Opacity="0.50" />
    </Button.Background>
    Click Me!
</Button>

Новый результат показан на рисунке 4.

Рисунок 4

Если установить Opacity для кнопки и ее содержимого, то непрозрачность умножится. Например, следующий код устанавливает значение Opacity в 50% для кнопки и для фона.

<Button Width="200" Height="30" Opacity="0.50" >
    <Button.Background>
        <SolidColorBrush Color="Gray" Opacity="0.50" />
    </Button.Background>
    Click Me!
</Button>

Новый результат выглядит аналогично показанному на рисунке 5, где значение Opacity фона 0.50 x 0.50 = 0.25.

Рисунок 5

Следующий фрагмент кода создает элемент управления "Кнопка" и динамически устанавливает для него значение Opacity.

private void CreateTransparentControls()
{
    Button tpButton = new Button();
    tpButton.Width = 200;
    tpButton.Height = 30;
    SolidColorBrush grayBrush = new SolidColorBrush(Colors.Gray);
    grayBrush.Opacity = 0.25;
    tpButton.Background = grayBrush;
    tpButton.Content = "Click Me!";
 
    // RootLayout is root Grid container on the Window
    RootLayout.Children.Add(tpButton);
}