【WPF学习】第四十二章 透明

　　WPF支持真正的透明效果。这意味着，若是在一个性质或元素上层叠另外几个形状或元素，并让全部这些形状和元素具备不一样的透明度，就会看到所指望的效果。经过该特性可以建立透过上面的元素能够看到的的图像背景，这是最简单的情形。最复杂的情形是，使用该特性可建立多层动画和其余效果，对于其余框架来讲这是很难实现的。

1、使用元素半透明

　　可采用如下几种方法使元素具备半透明效果：

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

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

 

•  　　窗口由不透明的白色背景。
• 　　顶级的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用户界面。所以主义不要过分使用透明特性。

2、透明掩码

　　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>

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

 

 　　还可结合使用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）必须反向设置。下图显示了最终效果：