當鼠標進入按鈕時,我們可以添加一個圖標蒙板並使之重疊於按鈕圖標圖片上方,從而同樣可以達到高亮突出按鈕的效果;不僅如此,通常一款游戲中所有的物品圖標和技能圖標尺寸是統一的,通過此方式,我們只需一張圖標蒙板就能達到所有圖標的高亮顯示,既大幅節約了素材資源空間,同時也達到了美化效果,一舉兩得。~嘿嘿
需求都清晰了,該用什麼控件來實現呢?當然是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>