WPF編遊戲系列 之二 圖示效果

原文: 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;
}      

待續… …