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

时间:2020-02-16 Peter.Luo 人气:0

　　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属性执行得更好。

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

　　窗口由不透明的白色背景。
　　顶级的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>

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

　　还可结合使用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学习】第四十二章 透明

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