Silverlight开发历程—（利用Image.OpacityMask做透明遮罩）

 

文本画刷ImageBrush  

用文本画刷，可以填充一些图形，文字的背景，例如下面代码，利用ImageBrush填充字体的背景。

<Canvas x:Name="LayoutRoot" Background="AliceBlue">        <TextBlock  Text="ImageBrush" FontFamily="Verdana"  FontSize="90" FontStyle="Italic" FontWeight="Bold">            <TextBlock.Foreground>                 <!--使用图像画刷填充TextBlock的Foreground-->                <ImageBrush ImageSource="../images/Silverlight.jpg" />            </TextBlock.Foreground>        </TextBlock>        <TextBlock  Text="图像填充"   FontSize="90" FontStyle="Italic" FontWeight="Bold" Canvas.Left="0" Canvas.Top="164">            <TextBlock.Foreground>                 <!--使用图像画刷填充TextBlock的Foreground-->                <ImageBrush ImageSource="../images/Silverlight.jpg" />            </TextBlock.Foreground>        </TextBlock>    </Canvas>

运行结果：

 

透明特效

透明特效（Opacity） 属性的作用就是改变Silverlight元素的透明度，当透明度为0时，显示内容为完全透明，当透明度为1时，显示内容完全不 透明。

如下代码，当前的显示内容就是为完全不透明状态。

 <StackPanel x:Name="LayoutRoot" Orientation="Horizontal" Opacity="1"  Background="White">    </StackPanel>

透明遮罩

透明遮罩（OpacityMask）和透明属性完全相似，不同的是透明遮罩不但可以控制元素的透明度，还可以根据渐变画刷的渐变范围来产生渐变透明效果。如下例子，同是产生一个放射渐变和普通渐变：

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal"  Background="White">        <Image Source="../images/Silverlight.jpg" Width="340" Height="217">            <Image.OpacityMask>                <!--使用放射渐变画刷-->                <RadialGradientBrush Center="0.5,0.5">                    <GradientStop Color="#00000000" Offset="1"></GradientStop>                    <GradientStop Color="#FF000000" Offset="0"></GradientStop>                </RadialGradientBrush>            </Image.OpacityMask>        </Image>        <Image Source="../images/Silverlight.jpg" Width="340" Height="217">            <Image.OpacityMask>                <!--线形渐变画刷-->                <LinearGradientBrush>                    <GradientStop Color="#00000000" Offset="0"></GradientStop>                    <GradientStop Color="#FF000000" Offset="1"></GradientStop>                </LinearGradientBrush>            </Image.OpacityMask>        </Image>    </StackPanel>

运行结果：

 

透明遮罩除了支持渐变画刷以外，他还支持ImageBrush画刷，根据画刷的图形来产生遮罩效果(有一点需要注意的就是，用来做绘制画刷的图片必须是索引类型的图片)，如下面例子：

原图，格式jpg

遮罩图：（格式索引类型的PNG）

然后代码：

  <Canvas x:Name="LayoutRoot" Background="White">        <Image Source="../images/shenghua.jpg" Canvas.Left="159" Canvas.Top="85">            <Image.OpacityMask>                <ImageBrush ImageSource="../images/zhi.png" />            </Image.OpacityMask>        </Image>    </Canvas>

运行结果：

根据遮罩图的。图形将原图给遮罩出来，不仅图片可以设置透明遮罩，视频同样也可以设置透明遮罩，如下代码：

 <MediaElement Width="300" Height="300" Canvas.Top="50" Source="silverlight.wmv">            <MediaElement.OpacityMask>                <ImageBrush ImageSource="../images/zhi.png" />            </MediaElement.OpacityMask>        </MediaElement>

同样可以产生遮罩效果

如果想了解更多Silverlight的知识，请持续关注本博客。