【実用サンプル】半透明ウィンドウを使って画像を最前面に表示するには(WPF)

C#入門
この記事は約4分で読めます。

あなたは、任意の画像を半透明の状態で最前面に表示したいと思ったことはありませんか?

たとえば間違い探しするとき、2つの画像のうち1つを半透明にして重ねたら、どこが違うか一目瞭然ですよね。

この技術は、アプリ開発において修正箇所の確認や、修正したことにる画面への影響が無いことを確認する際にも使えます。

もしそのような用途があるなら、この記事は必見です。

サンプルプログラムのイメージ

まず初めに、今回のサンプルプログラムは @ITの「WPF:ウィンドウを透明にするには?[C#/VB]」の記事に掲載されたサンプルプログラムをベースに、今回の用途に合うように且つVisual Studio 2022 で動作するように、少しだけカスタマイズしています。

より詳しい内容をお知りになりたい場合は、是非上記のサイトを訪問下さい。

さて、今回紹介するサンプルプログラムは次の機能を持っています。

  • ドラッグ&ドロップで画像を表示
  • 表示した画像の透明度を無段階に変更が可能
  • 常に最前面に表示
  • クリップボードの画像を表示可能

ソースコード一式(Projectファイル)のダウンロード場所

このサンプルプログラムは Visual Studio 2022 で作成しています。

ソースコード(EXEファイルも含む)は下記からダウンロードできます。

仕組み

仕組みとしては、枠の無い透明なWindow上にViewBoxを貼り付け、そこにドラッグ&ドロップした画像を表示、ViewBox の透明度を変えることで画像を透明表示しています。

Windowは常に最上位に表示することが可能なので、画像も常に最上位に表示することができます。

画像を目いっぱい表示するためにWindow枠を非表示にしており、このままではウィンドウの移動やリサイズができません。

そのため、マウスの左ボタンが押されたイベントの中に、ドラッグされた時の表示処理が記載されています。

サンプルプログラムの解説

今回のサンプルプログラムで使っているポイントは次の通りです。

Windowを常に最上位表示する

常に最上位に表示するには、Topmost に True を設定してあげればOKです。

XAMLで指定する場合は、下記の通りWindowタグに記述します。

コードで指定する場合は、下記のコードをコンストラクタなどに記述します。

Windowを透明表示する

XAMLのWindowタグに下記の3つを追加することで、枠がなく透明なWindowを作成します。

次に、ViewBoxの Opacity プロパティに透明度を設定するのですが、今回はスライダーで変更した値が設定されています。

実際にはBorderも画面で使っているので、こちらも Opacity の値をスライダーと連動させて透明化しています。

クリップボードにある画像を表示する

ドラッグ&ドロップによる画像の表示と処理を共通化するため、クリップボードの画像を取り込んだ画像は、一旦テンポラリーファイルに格納し、それをViewBoxに表示するようにしています。

プログラムソース全体

XAMLは次のようになります。

C#のソースコードは次のようになります。

まとめ

今回は、画像ファイルをドラッグ&ドロップし、常に最上位表示させながら透明度を変化させるWindowの作り方を紹介しました。

@ITの「WPF:ウィンドウを透明にするには?[C#/VB]」に掲載されているソースコードをコピーして、Visual Studio 2022で動作するように、且つクリップボードからの画像表示に対応するように少しだけ手を加えています。

2つの画像を重ね合わせて違いを見るというケースはあまりないかもしれませんが、もしそのような機会があれば、是非この記事を思い出してください。

タイトルとURLをコピーしました