WPF程序员自定义控库系列（二）——旋转按钮

上次写了一个简单的图片按钮控件，鼓足勇气发布到博客园首页，然后被移出，看来是文章质量不够。

以后先不往首页发布了，先多写几篇练练手。

本来想一步一步的来，再放个类似桌面图标的图片文本按钮控件的。

想了想，还是先把以前做的旋转按钮控件放上来吧。

这个控件类似于收音机上的旋钮，在触摸屏上用到可能性大一点，鼠标操作的话几乎没什么用处。

还是老样子，先放代码。

旋转按钮控件：

rotateButton.xaml

<UserControl x:Class="NingTao.rotateButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200">
  <Grid>
    <Image Margin="0" Name="imageBtn" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
      <Image.RenderTransform>
        <RotateTransform x:Name="rotateImage" Angle="0"/>
      </Image.RenderTransform>
    </Image>
    <Label Margin="0" Name="labelBtn" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False"></Label>
    <Ellipse Margin="0" Name="ellipseBtn" Fill="Black" Opacity="0.01" RenderTransformOrigin="0.5,0.5" MouseEnter="ellipseBtn_MouseEnter" MouseDown="ellipseBtn_MouseDown" MouseMove="ellipseBtn_MouseMove" MouseLeave="ellipseBtn_MouseLeave" MouseUp="ellipseBtn_MouseUp">
      <Ellipse.RenderTransform>
        <RotateTransform x:Name="rotateEllipse" Angle="0"/>
      </Ellipse.RenderTransform>
    </Ellipse>
  </Grid>
</UserControl>

rotateButton.xaml.cs

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;

namespace NingTao
{
  /// <summary>
  /// rotateButton.xaml 的交互逻辑
  /// </summary>
  public partial class rotateButton : UserControl
  {
    // 设置按钮使能状态
    private bool isEnable = true;
    // 按钮的4种状态图片
    private ImageSource imageUp = null;
    private ImageSource imageHover = null;
    private ImageSource imageDown = null;
    private ImageSource imageDisable = null;
    // 按钮的文本属性
    private FontFamily textFamily;
    private double textSize;
    private Brush textColor;
    // 按钮数值
    private int btnValue = 0;
    // 最小最大值
    private int valueMin = 0;
    private int valueMax = 100;
    // 角度单位 每单位数值表示角度 可转动(valueMax*anglePerValue/360)圈
    private int anglePerValue = 18;
    // 累积旋转角度 小于刻度时不断累积
    private double angleDelta = 0;
    // 是否在当前按钮中按下
    private bool isMouseDown = false;
    // 数值改变事件
    public event EventHandler valueChange;

    public rotateButton()
    {
      InitializeComponent();
    }

    #region 属性赋值
    // 按钮可用
    public bool IsEnable
    {
      get { return isEnable; }
      set
      {
        isEnable = value;
        imageBtn.Source = isEnable ? imageUp : imageDisable;
      }
    }
    // 按钮弹起图片
    public ImageSource ImageUp
    {
      get { return imageUp; }
      set
      {
        imageUp = value;
        imageBtn.Source = imageUp;
      }
    }
    // 按钮划过图片
    public ImageSource ImageHover
    {
      get { return imageHover; }
      set { imageHover = value; }
    }
    // 按钮按下图片
    public ImageSource ImageDown
    {
      get { return imageDown; }
      set { imageDown = value; }
    }
    // 按钮禁用图片
    public ImageSource ImageDisable
    {
      get { return imageDisable; }
      set { imageDisable = value; }
    }
    // 按钮字体
    public FontFamily TextFamily
    {
      get { return textFamily; }
      set
      {
        textFamily = value;
        labelBtn.FontFamily = textFamily;
      }
    }
    // 按钮字号
    public double TextSize
    {
      get { return textSize; }
      set
      {
        textSize = value;
        labelBtn.FontSize = textSize;
      }
    }
    // 文字颜色
    public Brush TextColor
    {
      get { return textColor; }
      set
      {
        textColor = value;
        labelBtn.Foreground = textColor;
      }
    }
    // 按钮数值
    public int Value
    {
      get { return btnValue; }
      set
      {
        if ((value > ValueMin) && (value < ValueMax))
        {
          btnValue = value;
          // 图像对齐
          valueReNew();
        }
      }
    }
    // 最小值
    public int ValueMin
    {
      get { return valueMin; }
      set { valueMin = value; }
    }
    // 最大值
    public int ValueMax
    {
      get { return valueMax; }
      set { valueMax = value; }
    }
    // 角度单位
    public int AnglePerValue
    {
      get { return anglePerValue; }
      set { anglePerValue = value; }
    }
    #endregion

    #region 按钮事件
    // 进入
    private void ellipseBtn_MouseEnter(object sender, MouseEventArgs e)
    {
      if (isEnable)
      {
        if (null != imageHover)
        {
          imageBtn.Source = imageHover;
        }
      }
    }
    // 按下
    private void ellipseBtn_MouseDown(object sender, MouseButtonEventArgs e)
    {
      if (isEnable)
      {
        isMouseDown = true;
        if (null != imageDown)
        {
          imageBtn.Source = imageDown;
          // 重新设置旋转中心点
          //rotateImage.CenterX = imageBtn.ActualWidth / 2;
          //rotateImage.CenterY = imageBtn.ActualHeight / 2;
          //rotateEllipse.CenterX = ellipseBtn.ActualWidth / 2;
          //rotateEllipse.CenterY = ellipseBtn.ActualHeight / 2;
          // 圆形旋转对齐
          Point P = e.GetPosition(sender as IInputElement);
          //double angle = Math.Atan2(P.Y - rotateEllipse.CenterY, P.X - rotateEllipse.CenterX) * 180 / Math.PI;
          double angle = Math.Atan2(P.Y - (ellipseBtn.ActualHeight / 2), P.X - (ellipseBtn.ActualWidth / 2)) * 180 / Math.PI;
          rotateEllipse.Angle = angle;
          // 图像对齐
          valueReNew();
        }
      }
    }
    // 移动
    private void ellipseBtn_MouseMove(object sender, MouseEventArgs e)
    {
      if (isEnable)
      {
        //鼠标已按下
        if (isMouseDown)
        {
          // 计算旋转角度
          Point P = e.GetPosition(sender as IInputElement);
          //double angle = Math.Atan2(P.Y - rotateEllipse.CenterY, P.X - rotateEllipse.CenterX) * 180 / Math.PI;
          double angle = Math.Atan2(P.Y - (ellipseBtn.ActualHeight / 2), P.X - (ellipseBtn.ActualWidth / 2)) * 180 / Math.PI;
          // 加上累积角度
          angle += angleDelta;
          // 大于一格的刻度
          if (Math.Abs(angle) > anglePerValue)
          {
            // 与单元角度整除的数 作为数值和旋转的增量
            int angleGrid = (int)angle / anglePerValue;
            // 当前数值不超过最大最小值
            int currentValue = angleGrid + btnValue;
            if (currentValue < valueMin) { currentValue = valueMin; }
            if (currentValue > ValueMax) { currentValue = ValueMax; }
            // 更新数值
            btnValue = currentValue;
            //  触发数值更新事件
            if (null != valueChange) { valueChange(this, null); }
            // 圆形旋转对齐
            rotateEllipse.Angle += anglePerValue * angleGrid;
            // 余数作为新的累积角度
            angle = angle % anglePerValue;
          }
          // 保存累积角度
          angleDelta = angle;
          // 图像对齐
          valueReNew();
        }
      }
    }
    // 弹起
    private void ellipseBtn_MouseUp(object sender, MouseButtonEventArgs e)
    {
      if (isEnable)
      {
        // 完成在控件上点击
        if (isMouseDown)
        {
          isMouseDown = false;
          imageBtn.Source = imageUp;
          // 清空累积值
          angleDelta = 0;
          // 图像对齐
          valueReNew();
        }
      }
    }
    // 离开
    private void ellipseBtn_MouseLeave(object sender, MouseEventArgs e)
    {
      if (isEnable)
      {
        isMouseDown = false;
        imageBtn.Source = imageUp;
        // 清空累积值
        angleDelta = 0;
        // 图像对齐
        valueReNew();
      }
    }
    #endregion

    // 图像对齐
    private void valueReNew()
    {
      // 显示数值
      labelBtn.Content = btnValue.ToString();
      // 计算旋转角度
      //double angle = (anglePerValue * btnValue) + angleDelta;
      double angle = (anglePerValue * btnValue);
      // 旋转图片
      rotateImage.Angle = angle;
    }
  }
}

演示窗体：

这里用了一个音量调节类来实现旋转第2个按钮来调节音量，需引用CoreAudioApi.dll。

Window1.xaml

<Window x:Class="ntCtrlLibs.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:rotateButton="clr-namespace:NingTao;assembly=rotateButton"
    Title="WPF控件测试" Height="300" Width="600" Loaded="Window_Loaded">
  <Grid>
    <rotateButton:rotateButton x:Name="rotateButtonT" Margin="12,12,0,0" Width="150" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top"></rotateButton:rotateButton>
    <rotateButton:rotateButton x:Name="rotateButtonN" Margin="170,12,0,0" Width="150" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top"></rotateButton:rotateButton>
  </Grid>
</Window>

Window1.xaml.cs（图片动态加载，可在调用控件时置顶背景图片）

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;

namespace ntCtrlLibs
{
  /// <summary>
  /// Window1.xaml 的交互逻辑
  /// </summary>
  public partial class Window1 : Window
  {
    // 当前声音设备
    private CoreAudioApi.MMDevice defaultDevice = null;

    public Window1()
    {
      InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
      // ================ 旋转按钮 ================
      try
      {
        rotateButtonT.ImageUp = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\volume1.jpg"));
        rotateButtonT.ImageDown = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\volume2.jpg"));
        rotateButtonN.ImageUp = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\btn1.png"));
        rotateButtonN.ImageDown = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\btn2.png"));
      }
      catch
      {
        MessageBox.Show("旋转按钮图片加载出错！");
      }
      rotateButtonT.Value = 50;
      rotateButtonT.TextSize = 20;
      rotateButtonT.TextColor = new SolidColorBrush(Colors.Blue);

      rotateButtonN.TextSize = 20;
      rotateButtonN.TextColor = new SolidColorBrush(Colors.Blue);
      // 获取声音设备
      CoreAudioApi.MMDeviceEnumerator devEnum = new CoreAudioApi.MMDeviceEnumerator();
      try
      {
        defaultDevice = devEnum.GetDefaultAudioEndpoint(CoreAudioApi.EDataFlow.eRender, CoreAudioApi.ERole.eMultimedia);
      }
      catch
      {
      }
      if (null != defaultDevice)
      {
        // 初始化数值
        rotateButtonN.Value = (int)(100 * defaultDevice.AudioEndpointVolume.MasterVolumeLevelScalar);
        // 按钮数值改变
        rotateButtonN.valueChange += (btnSender, btnEvent) =>
        {
          // 调节音量
          defaultDevice.AudioEndpointVolume.MasterVolumeLevelScalar = ((float)rotateButtonN.Value / 100);
        };
      }
    }
  }
}

下载地址