真実の楽譜(フルスコア)

プログラム関係の忘備録になるはず

三角形ボタンの作り方(C# Form)

C# Formアプリケーションで、
上下左右や、進む・戻る等を指定するときに便利な三角形ボタンの作り方。

雑なやり方(非推奨)

標準のボタンをFormに貼り付けて、
テキストに三角形の記号文字を指定。

public Form1()
{
  InitializeComponent();
  button1.Text = "▲";
}

しかしこれだと右向きや左向きの三角形の場合特殊文字を使うため、
表示されない可能性もあります。

ボタン内に三角形を描画するやり方

System.Windows.Forms.Buttonクラスを継承し、
ボタン内に三角形を描画するように拡張を行います。

Button継承クラスの作成

Buttonクラスを継承した以下のクラスを作成します。

ButtonBGTriangle.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;

namespace ButtonTriangleTest
{
  public partial class ButtonBGTriangle : System.Windows.Forms.Button
  {
    //三角形の方向指定用列挙体
    public enum TriangleDirection
    {
      Up = 1,
      Down = 2,
      Left = 4,
      Right = 8,
    }

    //三角形の方向指定プロパティ
    private TriangleDirection TRIANGLE_DIRECTION = TriangleDirection.Left;
    public TriangleDirection Direction
    {
      get { return this.TRIANGLE_DIRECTION; }
      set
      {
        this.TRIANGLE_DIRECTION = value;
        this.Invalidate();
      }
    }

    //三角形の塗りつぶし色プロパティ
    private Color TRIANGLE_COLOR = System.Drawing.SystemColors.ControlText;
    public Color TriangleColor
    {
      get { return this.TRIANGLE_COLOR; }
      set
      {
        this.TRIANGLE_COLOR = value;
        this.Invalidate();
      }
    }

    public ButtonBGTriangle()
    {
      this.Text = "";
    }

    protected override void OnTextChanged(EventArgs e)
    {
      base.OnTextChanged(e);
      //テキストを空に変更し無効化
      this.Text = "";
    }

    protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
    {
      base.OnPaint(e);

      Graphics g = e.Graphics;
      g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
      PointF[] drawPoint = new PointF[3];

      //TRIANGLE_DIRECTIONに応じて三角形を描画
      switch (TRIANGLE_DIRECTION)
      {
        case TriangleDirection.Up:
          drawPoint[0] = new PointF((this.ClientSize.Width - 1.0f) / 2.0f, (this.ClientSize.Height - 1.0f) / 4.0f);
          drawPoint[1] = new PointF((this.ClientSize.Width - 1.0f) / 6.0f, (this.ClientSize.Height - 1.0f) * 3.0f / 4.0f);
          drawPoint[2] = new PointF((this.ClientSize.Width - 1.0f) * 5.0f / 6.0f, (this.ClientSize.Height - 1.0f) * 3.0f / 4.0f);
          g.FillPolygon(new SolidBrush(TRIANGLE_COLOR), drawPoint);
          break;
        case TriangleDirection.Down:
          drawPoint[0] = new PointF((this.ClientSize.Width - 1.0f) / 2.0f, (this.ClientSize.Height - 1.0f) * 3.0f / 4.0f);
          drawPoint[1] = new PointF((this.ClientSize.Width - 1.0f) / 6.0f, (this.ClientSize.Height - 1.0f) / 4.0f);
          drawPoint[2] = new PointF((this.ClientSize.Width - 1.0f) * 5.0f / 6.0f, (this.ClientSize.Height - 1.0f) / 4.0f);
          g.FillPolygon(new SolidBrush(TRIANGLE_COLOR), drawPoint);
          break;
        case TriangleDirection.Left:
          drawPoint[0] = new PointF((this.ClientSize.Width - 1.0f) * 3.0f / 4.0f, (this.ClientSize.Height - 1.0f) / 6.0f);
          drawPoint[1] = new PointF((this.ClientSize.Width - 1.0f) * 3.0f / 4.0f, (this.ClientSize.Height - 1.0f) * 5.0f / 6.0f);
          drawPoint[2] = new PointF((this.ClientSize.Width - 1.0f) / 4.0f, (this.ClientSize.Height - 1.0f) / 2.0f);
          g.FillPolygon(new SolidBrush(TRIANGLE_COLOR), drawPoint);
          break;
        case TriangleDirection.Right:
          drawPoint[0] = new PointF((this.ClientSize.Width - 1.0f) / 4.0f, (this.ClientSize.Height - 1.0f) / 6.0f);
          drawPoint[1] = new PointF((this.ClientSize.Width - 1.0f) / 4.0f, (this.ClientSize.Height - 1.0f) * 5.0f / 6.0f);
          drawPoint[2] = new PointF((this.ClientSize.Width - 1.0f) * 3.0f / 4.0f, (this.ClientSize.Height - 1.0f) / 2.0f);
          g.FillPolygon(new SolidBrush(TRIANGLE_COLOR), drawPoint);
          break;
      }
    }
  }
}

これを作成すると、
こんな感じ↓のボタンコンポーネントが作れます。

f:id:s_sikisya:20140129114952p:plain

プロパティ

三角形の方向と塗りつぶし色はプロパティで設定します。

Direction:三角形の向き(Up,Down,Left,Right)
TriangleColor:三角形のカラー