【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)

例えば、 モノクロ 2 値やグレイスケールの画像を用意しておいて、表示するときに色を変えたいとかあるわけですよ。

上の画像は、 白と透明の  2 値画像ですが、 そのまま黒バックの上に表示すると、 次の画像のようになります (真ん中にカラーピッカーを追加しています)。

メモリー上のビットマップ内部では、 それぞれのピクセルは (R,G,B) = (0xff, 0xff, 0xff) か (0, 0, 0) のどちらかになっています。 そこで例えば、 (0xff, 0xff, 0xff) のピクセルだけを (0xff, 0, 0) に変えてやれば、 赤い画像に変わるわけです。

が、 それをピクセルごとにちまちまやってたんでは、 時間が掛かってしょうがありません。
昔、 8 x 8 = 64 ピクセルとか、 16 x 16 = 256 ピクセルとかを扱ってればよかった時代には、 当時の超非力な CPU でも、 256 回のループなんてのはまぁなんとかなりました (←いつの時代だよ!? w)。
今や、 1000 x 1000 ピクセルのビットマップとか平気で扱わなきゃならない時代。 1000 x 1000 ピクセルを全部舐めたら 100 万回ですよ!?

そんなわけで、 Direct2D の出番です♪

C# で書いている UWP アプリから DirectX を使うには、 SharpDX ってのもあります。
SharpDX は、 ほぼ DirectX をラップしただけの API なので、 生 DirectX プログラミングできるスキルがないと、 使うのはちょっと大変です。
例: WinRT／Metro TIPS：SharpDXを使ってDirectXで音声ファイルを再生するには？［ユニバーサルWindowsアプリ開発］

で、 それよりもっと WinRT API 寄りにガッツリとラップしてくれたのが、 Win2D  です。

横文字得意な人向け ⇒ Introducing Win2D: GPU accelerated 2D graphics programming in the Windows Runtime - Building Apps for WindowsBuilding Apps for Windows (2014/9/5)

Win2D でどんなことが出来るのかは、 サンプルアプリを見るのが早いです。
⇒ Win2D Example Gallery

続きを読む "【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)"

【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る

UWP アプリをやってると、 Windows Forms や WPF の TopMost プロパティが懐かしくなることってありますよね f(^^;

Creators Update (Version 1703, build 15063) から、 UWP アプリでも可能になりました♪

上の画像で、左上に赤丸の付いたウインドウ (この後で紹介するコード) と画面右上にある青色のウインドウが最前面に表示されています。 最大化した Visual Studio は、 インテリセンスのポップアップが出ているので、 これがアクティブな (フォーカスを持った) ウインドウです。 その手前に 2 つのウインドウが表示されているのです。

この「常に手前に表示」機能を実装したアプリの例

• クラウディアさんタイマー
• Square Clock

これをやるには、 ApplicationView クラスの TryEnterViewModeAsync メソッドを使います。

その使い方を説明する前に、 この CompactOverlay モードの動作を紹介しておきましょう。

こんなアプリを作りました。 これは通常モードのときのウインドウです。 表示エリアの左上に赤丸を置きました。 左下のボタンで、 モードを切り替えます。

そして、 CompactOverlay モードに入ると、 ウインドウの位置は必ず画面右上に移動されます (最初の画像にあるように、 その後で動かすのは OK)。

また、 モードに入る前のウインドウサイズは無視されて、 デフォルトでは上の画像のようなサイズになります (後のコードのところで説明しますが、 ある程度はサイズ指定可能)。

続きを読む "【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る"

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

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

※ クラウディア画像: © 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