目次

ボタンの表面を独自に描画する - C#

ボタンの表面を独自に描画するコードを紹介します。

UI

下図のUIを作成します。


コード

ButtonのMouseDown, MouseUp, Paintイベントを実装します。


以下のコードを記述します。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

namespace DrawButtonSurface
{
  public partial class FormMain : Form
  {
    bool push = false;

    public FormMain()
    {
      InitializeComponent();
    }

    private void button1_Paint(object sender, PaintEventArgs e)
    {
      LinearGradientBrush gb;
      Brush brush;
      PointF ptn;
      
      if (push == false) {
        gb = new LinearGradientBrush(
           e.Graphics.VisibleClipBounds, Color.Blue, Color.Aqua,
           LinearGradientMode.Horizontal);
        brush = new SolidBrush(Color.White);
        ptn = new PointF(10, 10);
      }
      else {
        gb = new LinearGradientBrush(
           e.Graphics.VisibleClipBounds, Color.Aqua, Color.White,
           LinearGradientMode.Horizontal);
        brush = new SolidBrush(Color.Black);
        ptn = new PointF(11, 11);
      }

      e.Graphics.FillRectangle(gb, e.Graphics.VisibleClipBounds);
      e.Graphics.DrawString(button1.Text, button1.Font, brush, ptn);
    }

    private void button1_MouseDown(object sender, MouseEventArgs e)
    {
      push = true;
      button1.Invalidate();
    }

    private void button1_MouseUp(object sender, MouseEventArgs e)
    {
      push = false;
      button1.Invalidate();
    }
  }
}

解説

private void button1_MouseDown(object sender, MouseEventArgs e)
{
  push = true;
  button1.Invalidate();
}

private void button1_MouseUp(object sender, MouseEventArgs e)
{
  push = false;
  button1.Invalidate();
}
ButtonのMouseDownイベントでボタンが押されたことを示すpush変数をTrueにし、Invalidateメソッドによりボタンの描画を更新します。MouseDownイベントではpush変数をFalseに設定し、Invalidateメソッドによりボタンの描画を更新します。

private void button1_Paint(object sender, PaintEventArgs e)
{
  LinearGradientBrush gb;
  Brush brush;
  PointF ptn;
      
  if (push == false) {
    gb = new LinearGradientBrush(
       e.Graphics.VisibleClipBounds, Color.Blue, Color.Aqua,
       LinearGradientMode.Horizontal);
    brush = new SolidBrush(Color.White);
    ptn = new PointF(10, 10);
  }
  else {
    gb = new LinearGradientBrush(
       e.Graphics.VisibleClipBounds, Color.Aqua, Color.White,
       LinearGradientMode.Horizontal);
    brush = new SolidBrush(Color.Black);
    ptn = new PointF(11, 11);
  }

  e.Graphics.FillRectangle(gb, e.Graphics.VisibleClipBounds);
  e.Graphics.DrawString(button1.Text, button1.Font, brush, ptn);
}
Paintイベントではボタンの表面の描画ロジックを記述します。LinerGradientBrushを用いてグラデーションブラシを作成し、ボタンの表面にグラデーションを描画します。また、DrawStringメソッドを呼び出してボタンの表面に文字列を描画します。

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。ボタンが独自のロジックで描画されていることがわかります。


ボタンをクリックします。クリックすると下図の状態に変わります。


MouseEnterやMouseLeaveイベントを実装することで、ポインタがボタンに入った際に描画内容を変更することもできます。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2012-06-18
iPentec all rights reserverd.