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);
        };
      }
    }
  }
}

 

 

下載地址