UWPで透過ウィンドウを作る - アズタケの開発日誌

おはようございます。

ついにWindows10 Creators Updateが4/11(上級者向け手動インストールは4/5)から一般公開されます。

CreatorsUpdateでは、UWPに関する様々な更新があります。
その中でグラフィック面で面白いものがありましたので備忘録がてら紹介します。

事前準備

現時点ではCreatorsUpdate自体もまだInsiderPreviewとなります。
CreatorsUpdate関係のAPIを使うためにはWindows10 SDK Insider 15063 などのSDKを入れましょう。
Download Windows Insider Preview SDK

Composition(Windows.UI.Composition)

Compositionを使用することでグラフィックに関する処理を行うことが出来、その一つには透過ウィンドウがあります。

このようにすりガラスのようにウィンドウの裏側を透過してくれます*1
また、この透過はアクティブウィンドウであることが条件であり、アクティブでなくなると数秒で透過状態ではなくなります。もしUIとして使うのであればエフェクトで透過のレベルを下げたり、アニメーションを使用しなければ違和感が出てしまうことに注意が必要そうですね。

透過には、 `Windows.UI.Composition.Compositor` が提供している `CreateHostBackdropBrush()` を使用することによりウィンドウの裏に対してぼかしをかけたブラシを得ることが出来ます。

具体的にサンプルとして示すとこのようになります。

var _compositor = ElementCompositionPreview
	.GetElementVisual(this).Compositor;
var _hostSprite = _compositor.CreateSpriteVisual();
_hostSprite.Size = new Vector2(
	(float)対象とする要素.ActualWidth,
	(float)対象とする要素.ActualHeight);

ElementCompositionPreview.SetElementChildVisual(
	grid, _hostSprite);
			
_hostSprite.Brush = _compositor.CreateHostBackdropBrush();

だいぶ簡単に組めますね。エフェクトを付けるとさらに面倒になるけど今回は割愛します。いつかかけたら書きます。

尚実際に実行可能なサンプルは以下のGitHub上にアップしてあります
github.com

次あたりはもう少しきちんとした記事を書きたい…

追記(04/03 16:29): Windows 10 Mobile は現時点では透過されません。今後行われるかもしれませんが…。(理想はホームの背景が表示されたりとか)

*1:完全透過は今の所出来ません。ソースは定かではありませんが、セキュリティ上の都合というのをどこかで見かけた覚えがあります[信用できない言葉]