WPF支持真正的透明效果。这意味着,如果在一个性质或元素上层叠另外几个形状或元素,并让所有这些形状和元素具有不同的透明度,就会看到所期望的效果。通过该特性能够创建透过上面的元素可以看到的的图像背景,这是最简单的情形。最复杂的情形是,使用该特性可创建多层动画和其他效果,对于其他框架来说这是很难实现的。

一、使用元素半透明

  可采用以下几种方法使元素具有半透明效果:

  •   设置元素的Opacity属性。每个元素(包括形状)都是从UIElement基类继承了Opacity属性。不透明度(Opacity)是0到1之间的小数,1表示完全不透明(默认值),0表示完全透明。例如,不透明度0.9会创建90%可见(10透明)的效果。当使用这种方法设置不透明度时,设置会被应用于整个元素的可见内容。
  •   设置画刷的Opacity属性。每个画刷也从Brush基类继承了Opacity属性。可使用0到1之间的值设置该属性,一控制使用画刷绘制的内容的透明度——不管是固定颜色画刷、渐变画刷,还有某种类型的纹理或图像画刷。因为可见形状的Stroke和Fill属性使用不同的画刷。所以可为边框和表面区域设置不同程度的透明度。
  •   使用具有透明Alpha值得颜色。所有alpha值小于255的颜色都是半透明的。例如,可在SolidColorBrush画刷中使用半透明颜色,并使用该画刷绘制元素的前景内容和背景表面。在有些情况下,使用半透明颜色比设置Opacity属性执行得更好。

  下图显示的例子具有多个半透明层。

wpf mediaelement透明背景_Opa

  •    窗口由不透明的白色背景。
  •   顶级的StackPanel面板包含所有元素,并使用应用了一幅图片的ImageBrush对象。减少了画刷的Opacity属性值,是颜色变淡,从而可以透过该背景看到窗口的白色背景。
  •   第一个按钮使用半透明的红色背景(WPF在后台创建SolidColorBrush画刷以绘制该颜色)。图像可透过按钮的背景显示,但文本是不透明的。
  •   第一个按钮下的标签的使用与正常情况一样。默认情况下,所有标签都有完全透明的背景色。
  •   文本框使用不透明的文本和边框,但使用半透明的背景色。
  •   文本框下的另一个StackPanel面板使用TileBrush画刷创建笑脸图案。TileBrush画刷的Opacity属性被降低,所以其他背景可透过该面板显示。例如,可在窗口的右下角看到太阳。
  •   第三个StackPanel面板中有一个TextBlock对象,该TextBlock对象的背景完全透明(默认设置)并具有半透明的白色文本。如果仔细观察,会发现两个背景都能透过一些字母显示。

  下面是XAML中的窗口内容:

<Window x:Class="Drawing.Transparency"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Background="White" Title="Transparency" Height="385" Width="450">
    <StackPanel Margin="5">
        <StackPanel.Background>
            <ImageBrush ImageSource="celestial.jpg" Opacity="0.7"/>
        </StackPanel.Background>
        <Button Foreground="White" FontSize="16" Margin="10" 
            BorderBrush="White" Background="#60AA4030"
            Padding="20">A Semi-Transparent Button</Button>
        <Label Margin="10" FontSize="18" FontWeight="Bold" Foreground="White">Some Label Text</Label>
        <TextBox Margin="10" Background="#AAAAAAAA" Foreground="White" BorderBrush="White">A semi-transparent text box</TextBox>
        <Button Margin="10" Padding="25" BorderBrush="White" >
            <Button.Background>
                <ImageBrush ImageSource="happyface.jpg" Opacity="0.6" 
TileMode="Tile" Viewport="0,0,0.1,0.4"/>
            </Button.Background>
            <StackPanel>

                <TextBlock Foreground="#75FFFFFF"  TextAlignment="Center" 
                   FontSize="30" 
                   FontWeight="Bold" TextWrapping="Wrap" >Semi-Transparent Layers</TextBlock>

            </StackPanel>
        </Button>
    </StackPanel>
</Window>

 

 透明是较受欢迎的WPF特性之一。实际上,透明特性非常容易使用而且工作的非常好,所有有些过于泛滥地被用于WPF用户界面。因此主义不要过度使用透明特性。

二、透明掩码

  Opacity属性使用元素的所有内容都是部分透明的。OpacityMask属性提供了更大的灵活性。可使用元素的特定区域透明或部分透明,从而实现各种常见的以及新颖的效果。例如,可使用OpacityMask属性将形状逐渐褪色到完全透明。

  OpacityMask属性接受任何画刷。画刷的alpha通常确定了什么地方是透明的。例如,如果使用SolidColorBrush画刷设置非透明颜色,元素将保持完全可见。颜色的其他细节(红、绿和蓝成分)并不重要,当设置OpacityMask属性时会忽略它们。

  使用SolidColorBrush画刷设置OpacityMask属性没有什么意义,因为可使用Opacity属性更容易地实现相同的效果。然而,当使用更特殊的画刷类型时,例如使用LinearGradient或RadialGradientBrush画刷,OpacityMask属性就变得更有用了。使用渐变将一种纯色变换到透明色,可创建在整个元素表面褪色的透明效果。例如,下面的按钮就使用了这种效果:

<Window x:Class="Drawing.OpacityMask"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="OpacityMask" Height="300" Width="300">
    <Window.Background>
        <ImageBrush ImageSource="grandpiano.jpg"></ImageBrush>
    </Window.Background>
    <Grid Margin="10,50">
        <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>
    </Grid>
</Window>

下图在一个窗口上显示了该按钮,在该窗口中还显示了一幅名贵钢琴的图片。

wpf mediaelement透明背景_ci_02

还可结合使用OpacityMask属性和VisualBrush画刷来创建反射效果。例如,以下标记创建了最常见的WPF效果之一——具有镜像文本的文本框。当输入文本时,VisualBrush画刷就会在下面绘制反射文本。使用VisualBrush画刷绘制一个矩形,该矩形使用OpacityMask属性褪色反射的文本,使反射文本与上面真实的元素区别开来:

<Window x:Class="Drawing.Reflection"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Reflection" Height="208.8" Width="491.2" Background="LightSteelBlue"
    >
    <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>
</Window>

 该例使用LinearGradientBrush画刷在完全透明的颜色和半透明的颜色之间进行渐变,是反射内容更加平淡。该例还使用RenderTransform翻转矩形,是反射的内容上下颠倒。因为使用了该变换,所以渐变过渡点(gradient Stops)必须反向设置。下图显示了最终效果:

wpf mediaelement透明背景_c#_03