Column >【Visual Studio】フラットなボタンの作り方(背景透過)
2016/9/7 【Visual Studio】フラットなボタンの作り方(背景透過)

Visual Studioを使って、ボタンを画像に置き換えたいなと思ったのでやってみました。

まずはデザイン画面を開いて、フォームの上にボタンを配置します。

今回はVisual Basicを使ってますが、Visual C++もVisual C#も特に変わりありません。



次はこのボタンに画像をのせてみます。
画像はこんなものを用意しました。
画像の外側の部分は透過してあります。



画像をのせたらこんな感じです。

とりあえずボタンに画像は入りましたが、
このままだとボタンの上にボタンがあるような感じで、
見栄え的にどうなのという気がするのでもう少し手を加えます。



ボタンのプロパティを見ると、BackColorとFlatStyleという項目があるので
BackColorをTransparentにFlatStyleをFlatに変更します。


すると、ボタンは下のようになります。
今までのボタン感はやや薄れて、外側に枠があるだけという感じになりました。



外側の枠を消したいときには、プロパティから
FlatAppearance.BorderSizeを0にすることで消すことができます。



そうすると、一見背景が透過されたボタンができたように見えますが、
マウスカーソルがボタンの上にのると背景に色がついてしまいます


ボタンのFlatStyleをFlatにしているときは、
ポインタがボタンの上に乗っているときの背景色をFlatAppearance.MouseOverBackColorで、
ボタンを押したときの背景色をFlatAppearance.MouseDownBackColorで管理しているので
それらの値をtransparentにすることで、
ボタンの背景はポインタの影響を受けず透過されたままになります。

    Please
    Share!
  • feedly
  • facebook
  • twitter
  • hatena bookmark
  • pocket
  • Google plus

inserted by FC2 system