WinFormでボタンを継承したユーザコントロールを作る

2018年8月12日

スタイルパターンをボタンのプロパティに設定できるようにする

GitHubへのリンク
StyleableButton

今更感は否めないが、WinFormでユーザコントロール作る。
スタイルパターンは、いくつかのプロパティを変更するためのプロパティ値のまとまりのこと。
仕事で画面デザインの統一をするというタスクがあり、それを楽に実現するために作った。

もともとの計画では、各プロパティに一つずつ値を手で設定していくという人海戦術を採用しようとしていた。

スタイルパターンが使えるボタン(スタイラブルボタンとでも言おうか)を作ることで、かなり楽ができるはず。
よく使うデザインを準備しておけば、フォントサイズなり、ボタンのサイズなり、いちいち全部設定する必要がなくなる。

ボタンクラスを継承したスタイラブルボタンを作る

以下が参考になった。
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/controls/walkthrough-inheriting-from-a-windows-forms-control-with-visual-csharp
プロジェクトを右クリックして、追加からユーザコントロールを選択する。

ユーザコントロールを追加する。名前はStyleableButtonとかにでもしておきますわ。

ユーザコントロールを作成した際に、デフォルトの継承元がUserControlとなっているので、それをButtonに変更する。
すると、もともと実装されていた AutoScaleModeプロパティが存在しないということで怒られるので、その一行は削除する。(自動的に作成されたソース)

とりあえず実験程度にスタイルを適当に定義して使えるか実験してみた。

using System.Drawing;
using System.Windows.Forms;

namespace StyleBtnProject
{
    public partial class StyleableButton : Button
    {
        // StylePattern 
        public enum StylePatternEnum
        {
            None,
            Default,
            Pattern1,
            Pattern2,
            Pattern3,
            Pattern4,
        }
        public void SetMyStyle()
        {
            switch (StylePattern)
            {
                case StylePatternEnum.None:
                    break;
                case StylePatternEnum.Pattern1:
                    this.BackColor = Color.Red;
                    this.Font = new System.Drawing.Font("メイリオ", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(128)));
                    this.Size = new System.Drawing.Size(86, 32);
                    break;
                case StylePatternEnum.Pattern2:
                    this.BackColor = Color.Yellow;
                    this.Font = new System.Drawing.Font("メイリオ", 14F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(128)));
                    this.Size = new System.Drawing.Size(90, 36);
                    break;
                case StylePatternEnum.Pattern3:
                    this.BackColor = Color.Blue;
                    this.Font = new System.Drawing.Font("メイリオ", 16F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(128)));
                    this.Size = new System.Drawing.Size(100, 45);
                    break;
                case StylePatternEnum.Pattern4:
                    this.BackColor = Color.White;
                    this.Font = new System.Drawing.Font("メイリオ", 18F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(128)));
                    this.Size = new System.Drawing.Size(110, 55);
                    break;
                default:
                    break;
            }
        }
        private StylePatternEnum _stylePattern;
        public StylePatternEnum StylePattern
        {
            get
            {
                return _stylePattern;
            }
            set
            {
                _stylePattern = value;
                SetMyStyle();
            }
        }

        public StyleableButton()
        {
            InitializeComponent();
        }
    }
}
 

作ったコントロールの使い方

ビルドすると、ツールボックスにスタイラブルボタンができてるので、こいつをフォームに配置してやる。
それだけ。

プロパティのStylePatternを選択すると、デザイナ上でボタンのスタイルが変わる。