WPF程序员自定义控库系列（三）——冷却按钮

最近新做了一个倒计时按钮，感觉跟游戏里的技能冷却图标挺像的。

整理了一下，先上demo。

下载地址

主要用了控件的裁剪功能。

控件的XAML

其中，文本控件是用来显示倒计时用的。冷却按钮里面没有，所以隐藏掉了。

<UserControl x:Class="NingTao.coolDownButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>

    <Image Margin="0" Name="imageBtnBack" MouseUp="imageBtnBack_MouseUp"></Image>
    <Image Margin="0" Name="imageBtnFront" IsHitTestVisible="False"></Image>
    <Label Margin="0,0,0,0" Name="labelCounter" IsHitTestVisible="False" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="Red" FontSize="26" Visibility="Hidden">0</Label>

  </Grid>
</UserControl>

控件的CS文件

其中，把以前的检测无动作功能去掉，以前是有动作就从新计时。

注释掉的部分是反方向旋转的，因为跟常见的冷却方向不一致，所以更改方向。

虽然代码不是很多，可是考虑cos和sin的时候也挺费工夫的。

弧线的起点和终点不一样，弧线的圆心在哪一侧也是不一样的。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Runtime.InteropServices;

namespace NingTao
{
  /// <summary>
  /// UserControl1.xaml 的交互逻辑
  /// </summary>
  public partial class coolDownButton : UserControl
  {
    // 按钮的背景前景图片
    private ImageSource imageBack = null;
    private ImageSource imageFront = null;
    // 文本属性
    private FontFamily textFamily;
    private double textSize;
    private Brush textColor;
    // 显示倒计时的计时器
    private System.Timers.Timer msgTimer = new System.Timers.Timer();
    // 计时器到期委托调用
    private delegate void invokeTimerTrick();
    // 倒计时最大值
    private double maxCounter = 0;
    // 无动作时间
    private double nowCounter = 0;
    // 点击事件 或者倒计时结束触发
    public event EventHandler Click = null;
    // 是否由点击触发（可能为页面后退事件）
    public bool isClickEvent = false;

    // 按钮背景图片
    public ImageSource ImageBack
    {
      get { return imageBack; }
      set
      {
        imageBack = value;
        imageBtnBack.Source = imageBack;
      }
    }
    // 按钮前景图片
    public ImageSource ImageFront
    {
      get { return imageFront; }
      set
      {
        imageFront = value;
        imageBtnFront.Source = imageFront;
      }
    }
    // 文本字体
    public FontFamily TextFamily
    {
      get { return textFamily; }
      set
      {
        textFamily = value;
        labelCounter.FontFamily = textFamily;
      }
    }
    // 文本字号
    public double TextSize
    {
      get { return textSize; }
      set
      {
        textSize = value;
        labelCounter.FontSize = textSize;
      }
    }
    // 文本颜色
    public Brush TextColor
    {
      get { return textColor; }
      set
      {
        textColor = value;
        labelCounter.Foreground = textColor;
      }
    }
    // 倒计时最大值
    public double MaxCounter
    {
      get { return maxCounter; }
      set
      {
        nowCounter = 0;
        maxCounter = value;
        // 启动计时器
        msgTimer.Start();
      }
    }

    public coolDownButton()
    {
      InitializeComponent();

      // 初始化海报倒计时计数器
      msgTimer.Elapsed += new System.Timers.ElapsedEventHandler(msgTimer_Elapsed);
      msgTimer.Interval = 200;
    }

    // 计数器到期
    private void msgTimer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
      //nowCounter = GetIdleTick() / 1000;
      nowCounter += 0.2;
      if (nowCounter < maxCounter + 0.2)
      {
        Dispatcher.Invoke(new invokeTimerTrick(reDraw));
      }
      else
      {
        isClickEvent = false;
        Dispatcher.Invoke(new invokeTimerTrick(buttonClick));
      }
    }

    private void reDraw()
    {
      // 显示剩余时间
      int timeLeft = Convert.ToInt32(maxCounter - nowCounter);
      int intMinute = timeLeft / 60;
      int intSecond = timeLeft % 60;
      labelCounter.Content = string.Format("{0:D2}:{1:D2}",intMinute, intSecond);
      // 裁剪剩余时间扇形区域
      double angle = 360 - 360 * nowCounter / maxCounter;
      if (360 == angle)
      {
        imageBtnFront.Clip = new EllipseGeometry(new Rect(0, 0, imageBtnFront.ActualWidth, imageBtnFront.ActualHeight));
      }
      else
      {
        //PathGeometry PathGeometry1 = new PathGeometry();
        //PathFigure PathFigure1 = new PathFigure();
        //PathFigure1.StartPoint = new Point(imageBtnFront.ActualWidth / 2, imageBtnFront.ActualHeight / 2);
        //LineSegment LineSegment1 = new LineSegment();
        //LineSegment1.Point = new Point(imageBtnFront.ActualWidth / 2, 0);
        //PathFigure1.Segments.Add(LineSegment1);
        //double offsetX = Math.Sin(angle * Math.PI / 180);
        //double offsetY = Math.Cos(angle * Math.PI / 180);
        //Point endPoint = new Point(imageBtnFront.ActualWidth * (1 + offsetX) / 2, imageBtnFront.ActualHeight * (1 - offsetY) / 2);
        //ArcSegment ArcSegment1 = new ArcSegment(
        //  endPoint,
        //  new Size(imageBtnFront.ActualWidth / 2, imageBtnFront.ActualHeight / 2),
        //  angle,
        //  (angle > 180),
        //  SweepDirection.Clockwise,
        //  true);
        //PathFigure1.Segments.Add(ArcSegment1);
        //PathGeometry1.Figures.Add(PathFigure1);
        //imageBtnFront.Clip = PathGeometry1;
        // 顺时针
        PathGeometry PathGeometry1 = new PathGeometry();
        PathFigure PathFigure1 = new PathFigure();
        // 起点为中心点
        PathFigure1.StartPoint = new Point(imageBtnFront.ActualWidth / 2, imageBtnFront.ActualHeight / 2);
        // 连接到扇形的圆弧起点
        LineSegment LineSegment1 = new LineSegment();
        double offsetX = Math.Sin(angle * Math.PI / 180);
        double offsetY = Math.Cos(angle * Math.PI / 180);
        LineSegment1.Point = new Point(imageBtnFront.ActualWidth * (1 - offsetX) / 2, imageBtnFront.ActualHeight * (1 - offsetY) / 2);
        PathFigure1.Segments.Add(LineSegment1);
        // 圆弧 终点在正上方
        ArcSegment ArcSegment1 = new ArcSegment(
          new Point(imageBtnFront.ActualWidth / 2, 0),
          new Size(imageBtnFront.ActualWidth / 2, imageBtnFront.ActualHeight / 2),
          angle,
          (angle > 180),
          SweepDirection.Clockwise,
          true);
        PathFigure1.Segments.Add(ArcSegment1);
        // 对图像控件进行裁剪
        PathGeometry1.Figures.Add(PathFigure1);
        imageBtnFront.Clip = PathGeometry1;
      }
    }

    // 点击事件
    private void imageBtnBack_MouseUp(object sender, MouseButtonEventArgs e)
    {
      isClickEvent = true;
      buttonClick();
    }

    private void buttonClick()
    {
      // 停止计时器
      msgTimer.Stop();
      // 触发点击事件
      if (null != Click) Click(null, null);
    }

    public void stopCount()
    {
      // 停止计时器
      msgTimer.Stop();
    }

    [DllImport("user32.dll")]
    static extern bool GetLastInputInfo(ref LASTINPUTINFO plii);

    /// <summary>
    /// 获取最后一次输入经过的时间
    /// </summary>
    /// <returns></returns>
    private int GetIdleTick()
    {
      LASTINPUTINFO lastInputInfo = new LASTINPUTINFO();
      lastInputInfo.cbSize = Marshal.SizeOf(lastInputInfo);
      if (!GetLastInputInfo(ref lastInputInfo)) return 0;
      return Environment.TickCount - (int)lastInputInfo.dwTime;
    }

    [StructLayout(LayoutKind.Sequential)]
    private struct LASTINPUTINFO
    {
      [MarshalAs(UnmanagedType.U4)]
      public int cbSize;
      [MarshalAs(UnmanagedType.U4)]
      public uint dwTime;
    }
  }
}

调用：

先添加引用coolDownButton.dll。

前边是xaml里的调用部分，后边是动态加载图片和设置点击事件。

// xaml
// xmlns:coolDownButton="clr-namespace:NingTao;assembly=coolDownButton"
//<coolDownButton:coolDownButton x:Name="cdButton" HorizontalAlignment="Right" Width="200" Margin="0,12,12,50"></coolDownButton:coolDownButton>

      // ================ 冷却按钮 ================
      cdButton.ImageBack = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a1.png"));
      cdButton.ImageFront = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a2.png"));
      cdButton.Click += new EventHandler(cdButton_Click);

    void cdButton_Click(object sender, EventArgs e)
    {
      // 按钮被点击
      if (cdButton.isClickEvent)
      {
        cdButton.MaxCounter = Convert.ToDouble(textBox1.Text);
      }
      else
      {
        MessageBox.Show("冷却完成");
      }
    }