困ったー

WIN10・アプリ・ゲームで困ったことを調べてみた

「こまったー」は困ったことを調べたブログです。

コロナ対策 |  Teams |  エクセル |  VisualStudio | 

スポンサーリンク


【Visual Studio 2019】C#でImageListを使ってボタンのアイコン管理

VisualStudioでのソフト開発では、動画の再生・停止ボタンなどアイコンを使って表現したいものがあります。

イメージリストを使うと、画像ファイルを順番で指定するだけで使えるようになるので、プログラム開発の効率を上げることができます。

ImageListとは?

ImageListとは?

その名の通りイメージをたくさん読み込んでおいて使えるようにする便利なコンポーネントです。

 

アイコンのように画像をたくさん使うプロジェクトでは、イメージリストを使って管理すると作りやすいと思います。

 

ImageListの使い方

ツールボックスにあります。

f:id:apicode:20200225103702p:plain

 

フォーム上に配置しても、実際にはフォームで目に見える形では出てきません。

下側にできたImageListを選択すると...

f:id:apicode:20200225103704p:plain

 

プロパティが選べます。

プロパティの「Images」を開くと、画像を読み込むためのダイアログが開きます。

「追加」ボタンで画像ファイルを開いて登録していきましょう。

f:id:apicode:20200225103706p:plain

 

 

ImageListを使ったボタンのアイコン表示 

設定の仕方

取り込んだイメージリストの画像をボタンのアイコンにしてみましょう。

まずはツールボックスのButtonを選んで、フォーム上にボタンを作ります。

 

ボタンのプロパティには「ImageList」というのがあるので、事前につくったImageListを指定します。

f:id:apicode:20200225104015p:plain

 

次にImageIndexでリスト内の順番を追加します。

f:id:apicode:20200225104019p:plain

 

これでボタン内のアイコンとしてイメージリストに登録している画像が表示できるようになりました。しかしちっちゃいっす。

f:id:apicode:20200225104134p:plain

 

サイズ調整の仕方

実はイメージリストはサイズが初期値16x16ピクセルとなっているため、取り込んだ画像が縮小されたままだったのです。

しょうがないので、ImageListでImageSizeを64,64などに設定。そのうえで64x64ピクセルの画像を登録しなおします。

f:id:apicode:20200225104424p:plain

 

すると、このように大きいアイコンが表示されるようになりました。

f:id:apicode:20200225104426p:plain

 

文字を消す

手っ取り早くボタン上の文字を消すには、ボタンのプロパティでTextを空白にすることです。

f:id:apicode:20200225104653p:plain

 

文字の場所を調整する

TextAlignを使う

文字をアイコンの下に出すにはボタンのプロパティでTextAlignを変更します。

この場合、文字を置く場所を指定しますので、9分割されたグリッドで中央下のものを選択します。

f:id:apicode:20200225104810p:plain

 

すると、文字がアイコンの下のほうに出るようになりました。

f:id:apicode:20200225104812p:plain

 

TextImageRelationを使う

「TextImageRelation」というプロパティで「ImageAboveText(文字の上に画像)」という設定を使うと、ボタンの大きさを変更してもアイコンのすぐ下に文字というレイアウトになります。

f:id:apicode:20200225105106p:plain

 

プログラムでアイコンを切り替える

ボタンを押したら再生アイコンを一時停止アイコンに変えたい....という場合もあるでしょう。

 

プログラムからアイコンを変更するには以下のようにImageIndexプロパティの順番を変えるだけでいいので管理が楽です。

private void button1_Click(object sender, EventArgs e)
{
button1.ImageIndex = 1;
}

 

注意点としては、イメージリストの1っ個目においた画像の番号は「1」ではなく「0」となります。

以降も一緒で、2つめにおいた画像は「2」ではなく「1」、3つめは「2」...のように1つづつ数字の値が小さい番号となります。

 

プログラムで配列を扱う場合、最初のものを0番目として扱うことに起因すると思います。決まり事なのでこのまま覚えておきましょう。

 

 

[C#関連記事]

  1. 【Visual Studio 2019】C#の始め方 - 困ったー
  2. 【Visual Studio 2019】C#のエラーと対策 - 困ったー
  3. 【C#】ツールボックス 一覧 - 困ったー
  4. 【Visual Studio】C#でフォームの使い方 フル画面?半透明?バーを消す?
  5. 【VisualStudio】C#のボタンとは?使い方は?
  6. 【VisualStudio】C#のパネルとは?使い方は?
  7. 【Visual Studio】C#で表・テーブルを使うには?
  8. 【Visual Studio】C#でスクレイピング
  9. 【Visual Studio】C#で文字やファイルを扱うには? - 困ったー
  10. 【Visual Studio】C#で画像やサウンドを扱うには? - 困ったー
  11. 【Visual Studio】C#で動画を制御するには?ビデオ入力表示は?
  12. 【Visual Studio】C#でインターネット関数の使い方 - 困ったー
  13. 【Visual Studio】C#で顔認識や日本語解析のサンプル - 困ったー
  14. 【Visual Studio】C#からMySqlの使い方 接続するには?SQL文を実行するには?

 

[Visual Studio 2019関連記事]

  1. Visual Studio 2019 無料で使うには?ダウンロードするには?
  2. インストーラ作成のまとめ アイコンは?.NET Frameworkを含めるには?
  3. Visual Source Codeとは?Visual Studio 2019との違いは?

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ