« 【#UWP】 どこでも掴んで動かせるウィンドウを作る | トップページ | 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る »

2017年8月 5日 (土)

【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる

前の記事「どこでも掴んで動かせるウィンドウを作る」のソースコードには、 15063 (Windows 10 Creaters Update, Version 1703) でもウィンドウに Acrylic Effect を掛けるために、 とりあえず暫定的なコードを書いていました。

20170729_draggablewindow01anime
※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.

今回、改めてわりと真面目に実装しなおしてみました。

  • Acrylic Effect 自体に色を付ける (前回は、手前に半透明の色を置いて誤魔化してましたw)
  • 設定で透明効果を OFF にしたとき (タブレットモードのときも)、ソリッドカラーにする
  • ウィンドウがフォーカスを失ったときも、ソリッドカラーにする

ひとつめは、面倒なんでやりたくないよ~、っと思ってた案件なんです。 が、サックリ使えるコードを JuniperPhoton 氏が公開してくださってるのを見つけたので、それを利用。 次のようなコードを書くだけですみました。超らくちん♪ (要 NuGet パッケージ 「Win2D.uwp」)

draggableGrid.Background
  = new MyerSplash.Common.Brush.AcrylicHostBrush()
    {
      TintColor = accentColor,
      TintColorFactor = 0.4,
      BackdropFactor = 0.6,
      BlurAmount = 20,
    };

二つめは、UISettings クラスの AdvancedEffectsEnabled プロパティで判定できます。 このプロパティが変化したときには UISettings クラスの AdvancedEffectsEnabledChanged イベントが叩かれるので、そのハンドラーで Acrylic Effect とベタな背景ブラシを切り替えてやれば OK。

ただし、AdvancedEffectsEnabledChanged イベントは別スレッドで叩かれるので要注意。 次のように Dispatcher.RunAsync してやります (内部関数にしているのは、ついでに ColorValuesChanged イベントにも対応したため)。

// 別スレッドで叩かれる!
_uiSettings.AdvancedEffectsEnabledChanged
  += (setting, o) => runAsync_SetBackgroundBrush();

async void runAsync_SetBackgroundBrush()
{
  await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
  {
    // ここで適切な背景ブラシをセット
  });
}

三つめは、 Window.Current.Activated イベントで e.WindowActivationState を見て切り替えてやるだけですね。

以上のコード全体 ⇒ https://github.com/biac/blogcode/tree/master/DraggableWindow

|

« 【#UWP】 どこでも掴んで動かせるウィンドウを作る | トップページ | 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る »

* プログラミング ( Metro スタイル )」カテゴリの記事

プログラミング」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/209349/65624631

この記事へのトラックバック一覧です: 【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる:

« 【#UWP】 どこでも掴んで動かせるウィンドウを作る | トップページ | 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る »