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

news/2024/7/3 14:15:15

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


http://www.niftyadmin.cn/n/4747390.html

相关文章

Linux中断内核编程

Linux中断内核编程 前言 在前面分析了中断的基本原理后&#xff0c;就可以写一个内核中断程序来体验以下&#xff0c;也可以借此程序继续深入来了解内核中断的执行过程 一.内核中断程序 &#xff1a; 我们还是来看一看成程序&#xff1a; 在看程序之前&#xff0c;要熟悉如…

Silverlight开发历程—(Clip裁剪特效)

Clip裁剪特效 裁剪特效&#xff08;Clip&#xff09;&#xff0c;允许对Silverlight元素进行裁剪&#xff0c;裁剪形状由Clip属性内包含的Geometry决定&#xff0c;下面直接上代码&#xff1a; <StackPanel x:Name"LayoutRoot" Orientation"Horizontal"…

configure文件中的build、host、target含义

configure文件中的build、host、target含义 今天阅读autobook[注1]一书,3.4节讲到了configuration name。书中提到了build、host、target这几个变量。看起来容易让人感到一些混淆&#xff0c;其实这极大的简化了二进制文件格式生成的控制。build -- 在build系统中建…

Android手机快捷键大全

Android手机快捷键大全 Posted by IA on 2010 年 12 月 24 日 Android手机的市场份额是越来越大&#xff0c;Android手机新用户也是越来越多&#xff0c;下面让我们来学习一下Android手机的快捷键&#xff0c;不管新手还是老手总会对你有用的! 全局快捷键启动&#xff08;默认&…

linux应用层获取鼠标坐标

linux应用层获取鼠标坐标2011-01-13 22:46补充&#xff1a;在这个函数中要打开一个鼠标设备&#xff0c;但是在嵌入式的文件系统中没有这个设备节点&#xff0c;鼠标设备的主设备号和次设备号有是如何确定的呢&#xff1f;在 linux 系统中&#xff0c;鼠标和键盘的设备号都是固…

makefile解释及模板

调试makefile 收藏一个调试makefile文件的简便方法&#xff1a;那就是用make -p|tee make.out来输出make运行过程中产生的中间信息。make -n 就可以输出调试make 的运行——————一般来说&#xff0c;最简单的就是直接在命令行下输入make命令&#xff0c;make命令会找当前目…

miniGui开发进展解决

1.miniGUI中&#xff0c;可以在编译配置选项中设置UI风格。改为FLAT后&#xff0c;编译示例报错。说是myDrawButton没有定义。后来看了源码&#xff0c;才解决。原来定义FLAT时&#xff0c;还有个_GRAY_SCREEN宏开关&#xff0c;决定是否定义&#xff4d;&#xff59;&#xff…

springboot创建parent_SpringBoot 使用maven创建springboot项目

有两种方式可以创建 1是使用spring-boot-start-parent &#xff0c;2是使用spring-boot-dependencies (即父项目dependencyManagement)(同理springcloud 项目也可以使用两种方式创建,推荐使用dependencyManagement,后续笔记中补充)1.使用 spring-boot-start-parent创建org.spr…