程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> C語言 >> 關於C語言 >> C#開發WPF/Silverlight動畫及游戲系列教程(Game Tutorial):(四十三)(2)

C#開發WPF/Silverlight動畫及游戲系列教程(Game Tutorial):(四十三)(2)

編輯:關於C語言

當鼠標進入按鈕時,我們可以添加一個圖標蒙板並使之重疊於按鈕圖標圖片上方,從而同樣可以達到高亮突出按鈕的效果;不僅如此,通常一款游戲中所有的物品圖標和技能圖標尺寸是統一的,通過此方式,我們只需一張圖標蒙板就能達到所有圖標的高亮顯示,既大幅節約了素材資源空間,同時也達到了美化效果,一舉兩得。~嘿嘿

需求都清晰了,該用什麼控件來實現呢?當然是QXIcon,不過這次我們得對它進行一些改造,使之目前至少能兼容3種情況:

public enum IconTypes {
 /// <summary>
 /// 無
 /// </summary>
 None = 0,
 /// <summary>
 /// 變換突出
 /// </summary>
 Transform = 1,
 /// <summary>
 /// 高亮突出
 /// </summary>
 Highlights = 2,
}

QXIcon的主要構造如下:

/// <summary>
/// 圖標控件
/// </summary>
public QXIcon(IconTypes iconTypes) {
 InitializeComponent();
 switch (iconTypes) {
  case IconTypes.Transform:
    this.MouseEnter += delegate { Container.Background = NewSource; };
    this.MouseLeave += delegate { Container.Background = _BodySource; };
    break;
  case IconTypes.Highlights:
    Rectangle mask = new Rectangle() { Visibility = Visibility.Collapsed };
    Container.Children.Add(mask);
    this.MouseEnter += delegate {
    mask.Width = this.Width;
    mask.Height = this.Height;
    mask.Fill = NewSource;
    mask.Visibility = Visibility.Visible; };
  this.MouseLeave += delegate { mask.Visibility = Visibility.Collapsed; };
  break;
 }
}
Brush _BodySource;
/// <summary>
/// 獲取或設置圖標筆刷
/// </summary>
public Brush BodySource {
 get { return _BodySource; }
 set { Container.Background = _BodySource = value; }
}

/// <summary>
/// 獲取或設置變換後(或蒙板)筆刷
/// </summary>
public Brush NewSource { get; set; }

默認情況下,即參數為IconTypes.None時,該圖標控件僅僅是一個帶Toolkit的普通圖標;當參數為IconTypes.Transform時,圖標控件中的圖片會根據鼠標進入與離開分別在NewSource和_BodySource之間切換,即前文中提到的第一種情況;而當參數為IconTypes.Highlights時,效果即上敘第二種情況,通過圖標蒙板來實現圖標的高亮突出。

同時,我也對該QXIcon的Toolkit進行了改造,使之更加新穎別致:

<ToolTipService.ToolTip>
 <ToolTip>
  <ToolTip.Template>
   <ControlTemplate>
    <ContentPresenter Content="{TemplateBinding Content}"/>
   </ControlTemplate>
  </ToolTip.Template>
  <ToolTip.Content>
    <Canvas x:Name="Dialog">                         <Rectangle x:Name="DialogBack" Fill="Black" RadiusX="7" RadiusY="7" Stroke="Gray" StrokeThickness="2" Opacity="0.4" />
     <TextBlock x:Name="Details" Foreground="Snow" TextWrapping="Wrap" Width="150" Canvas.Left="5" Canvas.Top="5" />
   </Canvas>
  </ToolTip.Content>
 </ToolTip>
< /ToolTipService.ToolTip>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved