標準コントロールのボタンの使い方について（Image, BackgroundImage）

2019/09/30

標準コントロールのボタンは特によく使われると思いますが、今回は、ボタンに画像を張付けの使い方について順を追って説明したいと思います。

ボタン上の Image に画像を張り付ける方法
別の場所からボタンクリックを起動する方法
ボタン全面に画像を張り付ける方法

■ボタン上の Image に画像を張り付ける方法

フォーム上にボタンを張り付けて、そのボタンの Image プロパティに画像を設定します。
（以下の図は、ボタンを張り付けたところまで）

次にボタンの Image プロパティの「…」ボタンをクリックします。リソースの選択ダイアログが開きます。

上のダイアログの「プロジェクトリソースファイル」の下の方の「インポート(M)」ボタンをクリックします。
以下のファイル選択ダイアログが開きますので、そこでペイント等の画像ソフトで作成しておいた画像ファイルを指定します。（今回は簡単な矢印の画像のファイルを作成しました）

このダイアログの「開く」をクリックすると以下の様に画像がリストに反映されます。矢印の画像ファイルが選択されている状態で、「OK」をクリックします。

そのボタンの Image プロパティに画像が設定されたことが分かります。ここで TextImageRelation プロパティを適当な値（今回は ImageBeforeText）に設定します。そうしますと左側のデザイン画面にも画像が表示されます。

以下のソースを見て下さい。通常通りボタンのクリックイベントの処理を記述して、ボタンが働くことを確認します。

Public Class frmButton

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        MsgBox("Bitmapイメージを貼付したボタン")
    End Sub

End Class

これを実行すると以下の様な表示になります。

■別の場所からボタンクリックを起動する方法

別の処理からボタンのクリック処理を呼び出したい場合がありますが、この時にはボタンの PerformClick メソッドをコールします。

次は、上記で張り付けたボタンのコピーをフォーム上で行います。第2のボタンから最初のボタンクリックを呼出します。

Public Class frmButton

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        MsgBox("Bitmapイメージを貼付したボタン")
    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        '別のボタンからクリックイベントを起動
        Me.Button1.PerformClick()
    End Sub
End Class

これを実行すると以下の様な表示になります。（下図は Button2 をクリックしたところです）

■ボタン全面に画像を張り付ける方法

新しいフォームにボタンを追加して、サイズを縦横 200 ピクセルぐらいとします。さらにボタンの BackgroundImage に画像ファイルを指定します。
（以下の図は、ボタンを張り付けたところまで）

次にボタンの BackgroundImage プロパティの「…」ボタンをクリックします。リソースの選択ダイアログが開きます。「ローカルリソース」をクリックします。

上のダイアログの「ローカルリソース」の「インポート(M)」ボタンをクリックします。
以下のファイル選択ダイアログが開きますので、そこでペイント等の画像ソフトで作成しておいた画像ファイルを指定します。（今回は簡単な四角い画像のファイルを作成しました）

このダイアログの「開く」をクリックすると以下の様に画像がリストに反映されます。さらに、「OK」をクリックします。

そのボタンの BackgroundImage プロパティに画像が設定されたことが分かります。ここで FlatStyle プロパティを Flat に設定します。そうしますと左側のデザイン画面にも画像が表示されます。

このままプログラムを実行してもボタンの画像は全体が表示されませんので、ボタンの画像描画などは自分で行うことになります。

フォームロード時にボタンのペイントイベントの処理ハンドラを登録します。
ペイントイベントでは、ボタンの背景画像をボタンのサイズに合わせて再描画します。その後で、ボタンの Text プロパティに設定された文字列を、ボタンの中央に表示します。

背景画像の描画には Graphics.DrawImage メソッドを使用し、文字列の描画には Graphics.DrawString メソッドを使用します。
文字列描画の Graphics.DrawString では StringFormat クラスを用いてボタンのTextを描画の位置指定します。

Public Class frmButton2

    Private Sub frmButton2_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'Button1のPaintイベントハンドラを追加
        AddHandler Button1.Paint, AddressOf Button1_Paint
    End Sub

    Private Sub Button1_Paint(sender As Object, e As PaintEventArgs)
        'ボタンの背景画像をボタンの大きさに合わせて描画
        e.Graphics.DrawImage(Me.Button1.BackgroundImage, Me.Button1.ClientRectangle)

        'StringFormatクラスを用いてボタンのTextを描画の位置指定
        Dim Sfrm As New StringFormat()
        '文字列の水平位置
        Sfrm.Alignment = StringAlignment.Center
        '文字列の垂直位置
        Sfrm.LineAlignment = StringAlignment.Center
        'ブラシの作成
        Dim Brs As Brush = New SolidBrush(Me.Button1.ForeColor)
        e.Graphics.DrawString(Me.Button1.Text, Me.Button1.Font, Brs, Me.Button1.ClientRectangle, Sfrm)
        'ブラシの解放
        Brs.Dispose()
        'StringFormatの解放
        Sfrm.Dispose()
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        MsgBox("イメージボタンをクリック")
    End Sub
End Class

これを実行すると以下の様な表示になります。

VB.NET-TIPS などプログラミングについて

■ボタン上の Image に画像を張り付ける方法

■別の場所からボタンクリックを起動する方法

■ボタン全面に画像を張り付ける方法

関連する記事

コメント