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

本文介绍Silverlight中如何使用ImageBrush填充文本背景及实现透明特效,包括使用Opacity属性调整透明度,OpacityMask实现渐变透明效果,并通过示例展示如何应用不同的画刷。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文本画刷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的知识,请持续关注本博客。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值