如何在WPF控件上应用简单的褪色透明效果？

Posted 2021-11-26 lonelyxmas

原文 https://dailydotnettips.com/how-to-create-simple-faded-transparent-controls-in-wpf/

使用OpacityMask属性，我们可以使元素的特定区域透明或部分透明。在这个技巧中，我将向您展示如何在WPF中的某些元素上应用褪色透明效果。

 

我们可以使用OpacityMask与两个SolidColorBrush或GradientColorBrush。但是如果你想达到与褪色鉴于透明效果，你必须使用OpacityMask与LinearGradientBrush甚至可以使用RadialGradientBrush。

让我们从GradientColorBrush开始，我已经应用了一个渐变效果，它从固体颜色移动到透明颜色，适用于TextBox控件。

因此，上面的代码块设置TextBox控件OpacityMask，LinerGradientBrush其中渐变从黑色开始到透明。

类似地，您也可以应用其他元素，比如下面的Button控件

在运行中，我们将得到以下输出。

那么，现在你可以尝试RadialGradientBrush更多的乐趣

在完整的XAML代码块下面

？

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31

<Window x:Class="WpfApplication3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="AliceBlue"> <Grid> <Image Name="image1" Stretch="Fill"  Margin="12" Source="/WpfApplication3;component/Images/Backgrounds_25962.jpg" />    <Button Content="Click Me !" Height="42" HorizontalAlignment="Left" Margin="152,213,0,0" Name="TransBurron" VerticalAlignment="Top" Width="234" > <Button.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0.3" Color="Black"></GradientStop> <GradientStop Offset="1" Color="Transparent"></GradientStop> </LinearGradientBrush> </Button.OpacityMask> </Button> <TextBox Height="30" Margin="83,74,59,207"> <TextBox.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0" Color="Black"></GradientStop> <GradientStop Offset="1" Color="Transparent"></GradientStop> </LinearGradientBrush> </TextBox.OpacityMask> </TextBox> </Grid> </Window>

希望这会有所帮助。

干杯！

AJ。