WPF图标特殊效果实现方法

WPF开发工具的用途主要是体现在各种图形界面的显示方面。那么在使用的过程中，其中有很多技巧值得我们去深入研究。本篇将要实现图标的两个效果：1. 显示图标标签，2. 图标模糊效果。#t#

在上一篇中提到Image没有HTML < img>的Title属性（在MSDN中也没找到类似的属性），所以本篇将自行制作一个标签，它的功能是当鼠标移动到图标上方时会显示该图标的Tag说明，并且该WPF图标模糊显示。

1. 在Home < Image>中加入MouseEnter和MouseLeave事件。

1. < Image　Source="image/home.png"　
2. Width="110"　Height="110"　
3. Tag="My　Home"Canvas.Left="30"
   Canvas.Top="20"　
4. Cursor="Hand"　  
5. MouseEnter="Image_BlurEffect_MouseEnter"　  
6. MouseLeave="Image_BlurEffect_MouseLeave"> 
7. < /Image> 

2. 事件加好了，就要为添加内容了。先看Image_BlurEffect_MouseEnter事件：

 
 
 

  
  
  
private　void　Image_BlurEffect_
MouseEnter(object　sender,
MouseEventArgs　e)　  
  
  
  
{　  
  
  
  
//将sender定义为Image对象　  
  
  
  
Image　image　=　sender　as　Image;  
  
  
  
//创建模糊BlurEffect对象　  
  
  
  
BlurEffect　newBlurEffect　=　
new　BlurEffect();  
  
  
  
//设定模糊效果值Radius　  
  
  
  
newBlurEffect.Radius　=　5;  
  
  
  
//为Image添加Blur效果　  
  
  
  
image.Effect　=　newBlurEffect;  
  
  
  
//将Image　Tag内容传给imageTitle　
Textblock　  
  
  
  
imageTitle.Text　=　"　"　+　
image.Tag.ToString()　+"　";  
  
  
  
//将imageTitle的Border设置为可见　  
  
  
  
imageTitleBorder.Visibility　=　
Visibility.Visible;  
  
  
  
//调整imageTitleBorder的Canvas位置，
使其在图标下方显示　  
  
  
  
Canvas.SetLeft(imageTitleBorder,　
Canvas.GetLeft(image)+　image.
Width　/　2　-　15);　  
  
  
  
Canvas.SetTop(imageTitleBorder,　125);　  
  
  
  
}  
  
  
  
private　void　Image_BlurEffect_
MouseLeave(object　sender,
MouseEventArgs　e)　  
  
  
  
{　  
  
  
  
Image　image　=　sender　as　Image;　  
  
  
  
BlurEffect　newBlurEffect　=　
new　BlurEffect();　  
  
  
  
newBlurEffect.Radius　=　0;　  
  
  
  
image.Effect　=　newBlurEffect;　  
  
  
  
imageTitleBorder.Visibility　=　
Visibility.Collapsed;　  
  
  
  
} 
 
 
 

可以使用ToolTipService。经过测试使用ToolTip可以实现标签的功能（代码如下），而且也不用预设WPF图标显示效果，但是没法通过Canvas设定其位置，大家可以都学习一下。

 
 
 

  
  
  
XAML:  
  
  
  
< Image　Source="image/home.png"　
Width="110"　Height="110"　  
  
  
  
Tag="My　Home"　Canvas.Left="30"　
Canvas.Top="20"　  
  
  
  
MouseEnter="Image_BlurEffect_
MouseEnter"　  
  
  
  
MouseLeave="Image_BlurEffect_
MouseLeave"　  
  
  
  
Cursor="Hand">　  
  
  
  
< Image.ToolTip>　  
  
  
  
< TextBlock>My　Home< /TextBlock>　  
  
  
  
< /Image.ToolTip>　  
  
  
  
< /Image> 
 
 
 

C#代码自然就简单多了:

 
 
 

  
  
  
private　void　Image_BlurEffect_
MouseEnter(object　sender,
MouseEventArgs　e)　  
  
  
  
{　  
  
  
  
Image　image　=　sender　as　Image;　  
  
  
  
BlurEffect　newBlurEffect　=　
new　BlurEffect();　  
  
  
  
newBlurEffect.Radius　=　5;　  
  
  
  
image.Effect　=　newBlurEffect;　  
  
  
  
} 
 
 
 

上面这些方法介绍的就是WPF图标显示效果的实现。