WPF编游戏系列 之二 图标效果
本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果。在上一篇中提到Image没有HTML <img>的Title属性(在MSDN中也没找到类似的属性),所以本篇将自行制作一个标签,它的功能是当鼠标移动到图标上方时会显示该图标的Tag说明,并且该图标模糊显示,如下图对比所示。
原始状态 效果状态
1. 在Home <Image>中加入MouseEnter和MouseLeave事件。
<Image Source="image/home.png" Width="110" Height="110" Tag="My Home"
Canvas.Left="30" Canvas.Top="20" Cursor="Hand" MouseEnter="Image_BlurEffect_MouseEnter"
MouseLeave="Image_BlurEffect_MouseLeave"></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可以实现标签的功能(代码如下),而且也不用预设显示效果,但是没法通过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; }
待续… …
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
WPF编游戏系列 之一 布局设计
原文: WPF编游戏系列 之一 布局设计 本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流。言归正传,在编写一个软件前首先要思考软件的结构与布局,图片放在哪,按钮放在哪,都要先设计一下。当然本实例也只是简单布局,先上个图也好讲解。 从图中可以大概了解到本实例结构为上下布局: 1. 首先,是背景图片,不用多说就是为了好看,简单的一个Image就可以实现了。 <Image Source="image/backimage.jpg"></Image> 2. 在软件最上方的四个图标就是功能菜单,点击它们就会有相应的菜单显示在下面。这四个图标也是由Image构成,但是需要给它们附加一些事件,以达到想要的效果。后续文章中将介绍它们的功能。 将图标放在Canvas中,通过Canvas.Left和Canvas.Top来调整图标位置,Width和Height调整图标大小,Tag标记一下图标内容,Cursor设为Hand当鼠标放到图标上时表现为可以点击状态。 <Canvas> <...
- 下一篇
WPF编游戏系列 之五 数据绑定
原文: WPF编游戏系列 之五 数据绑定 在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作。对于数据绑定具体内容的在这里就不多说了,有许多相关资料可以参考,博客园的达人们肯定也有相关教程。 1. 创建一个GoodsInfo类,其中包括GoodsImage、GoodsPrice、GoodsQty、GoodsBuyImageTag 这四个属性。 using System; namespace XMarket { class GoodsInfo { public string GoodsImage { get; set; } public string GoodsPrice { get; set; } public string GoodsQty { get; set; } public string GoodsBuyImageTag { get; set; } } } 2. 使用{Binding Property} 为控件组增加绑定内容,再次打开GoodsElement.xaml控件,将GoodsIm...
相关文章
文章评论
共有0条评论来说两句吧...