博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WPF编游戏系列 之二 图标效果
阅读量:6296 次
发布时间:2019-06-22

本文共 1524 字,大约阅读时间需要 5 分钟。

原文:

       本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果。在中提到Image没有HTML <img>的Title属性(在MSDN中也没找到类似的属性),所以本篇将自行制作一个标签,它的功能是当鼠标移动到图标上方时会显示该图标的Tag说明,并且该图标模糊显示,如下图对比所示。

  原始状态                                                 效果状态

 t1           imagetitle

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

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:

   
My Home

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;}

待续… …

转载地址:http://zlvta.baihongyu.com/

你可能感兴趣的文章
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>
iOS 多线程总结
查看>>
webpack是如何实现前端模块化的
查看>>
TCP的三次握手四次挥手
查看>>
关于redis的几件小事(六)redis的持久化
查看>>
webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react开发环境
查看>>
Maven 插件
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的?
查看>>
<三体> 给岁月以文明, 给时光以生命
查看>>