WPF编游戏系列 之二 图标效果

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

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

  原始状态                                                 效果状态

 t1           imagetitle

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

待续… …

目录
相关文章
|
前端开发 C#
WPF编游戏系列 之一 布局设计
原文:WPF编游戏系列 之一 布局设计        本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流。言归正传,在编写一个软件前首先要思考软件的结构与布局,图片放在哪,按钮放在哪,都要先设计一下。
628 0
|
C# C++
WPF编游戏系列 之四 用户控件
原文:WPF编游戏系列 之四 用户控件        在上一篇《WPF编游戏系列 之三 物品清单》中,对物品清单进行了演示,其中反复用到了同一组控件(如下图),而且 颜昌钢也指出在3.2.2中使用的C#代码过多,其实我在写这些代码时也有同感,的确很繁琐也不好维护。
594 0
|
SQL C#
WPF编游戏系列 之三 物品清单
原文:WPF编游戏系列 之三 物品清单        本篇将介绍如何通过C#自动生成游戏界面,主要演示点击“My Shop”后如何显示所有物品清单。其中数据源来自于Access 2007,当然肯定会用到System.Data.OleDb。
857 0
|
C#
WPF编游戏系列 之六 动画效果(1)
原文:WPF编游戏系列 之六 动画效果(1)        本篇主要针对界面进行动画效果处理。首先在打开或关闭界面时,使其产生动态效果而不是生硬的显示或消失(如下图)。其次在鼠标放到关闭窗口图标上时,使其出现闪动效果。
670 0
|
C# 前端开发
WPF编游戏系列 之七 动画效果(2)
原文:WPF编游戏系列 之七 动画效果(2)        上一篇已经对关闭窗口图标进行了动画效果处理,本篇将对窗口界面的显示和关闭效果进行处理。由于所有的动画效果都是针对窗口界面的Canvas,所以先要为它添加一些RenderTranform属性,这些属性不要填写任何效果,后面会由Storyboard和EventTrigger为其提供。
639 0
|
C# 数据库
WPF编游戏系列 之九 物品清单再优化
原文:WPF编游戏系列 之九 物品清单再优化        在“第三篇”和“第四篇”中通过用户控件和数据绑定功能对物品清单进行一些优化减少了部分C#代码,但感觉使用Grid设置物品显示位置实在是太繁琐,而且还要为n个物品重复创建新UserControl很浪费资源,所以决定使用ListBox、UserControl和DataTemplate来对物品清单再优化下,让XAML多干些活而不是总用C#调用UI,这样日后维护起来也方便。
647 0
|
C#
WPF编游戏系列 之八 银行界面及金额校验
原文:WPF编游戏系列 之八 银行界面及金额校验        在前面《WPF编游戏系列 之四 用户控件》一文中通过用户控件创建了“My Shop”中物品列表框。本篇继续使用用户控件创建银行界面,并在用户进行存钱操作时对其输入金额的有效性进行校验。
762 0
|
C#
WPF——TaskBarIconOverlay(任务栏图标叠加)
原文:WPF——TaskBarIconOverlay(任务栏图标叠加)     1 public partial class MainWindow : Window 2 { 3 public MainWi...
1112 0
|
29天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
102 0
|
29天前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
77 1