Windowsストアアプリ開発 Tips集011 ～コントロールの明るさを一発で変える～

マイクロソフトの田中達彦です。
本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。

[コントロールの明るさ]
コントロールの明るさには、2つの種類があります。
デフォルトは明るい色に設定されています。

Visual Studioで新しいアプリケーションを作成すると、背景が黒いアプリが作成されます。
その上にボタンなどのコントロールを貼りつけると、枠や文字が以下のように白く表示されます。

ここでアプリの背景を水色などの明るい色に変更すると、ボタンそのものが見えにくくなってしまいます。

ボタンのForegroundプロパティを変更しても、以下のように文字の部分の色が変わるだけです。
しかも、マウスをボタン上にホバーさせると、文字が白くなって見えにくくなります。

このようなときは、アプリのテーマカラーの種類を変更します。
App.xamlを開き、以下の黄色くマーカーした部分を追加します。
水色でマーカーした部分は、アプリによって変わるところです。

このようにRequestedThemeをLightに設定すると、以下のように明るい背景上でコントロールが見やすくなります。

RequestedThemeにはDarkとLightがあり、指定していないとき、すなわちデフォルトではDarkになっています。
もしアプリ全体を明るい色にするときは、RequestedThemeにLightを設定すると、標準のコントロールの色が見やすい色に変わります。

以下は、連載している縦書きビューワーの設定画面です。
左がRequesterThemeがLightの場合、右がDarkの場合です。
この場合は背景が明るい色なので、Lightを指定します。

マイクロソフト
田中達彦

Comments

Anonymous
April 14, 2013
RequestedTheme="Light" って、ユーザーのシステム設定より優先されるんでしたっけ? msdn.microsoft.com/.../windows.ui.xaml.application.requestedtheme > ユーザーがハイコントラストモードで実行する場合は無視されます。ハイコントラストモードだけ確認しておけばいいのかな。
Anonymous
April 15, 2013
標準のコントロールの色は、ハイコントラストモードのときにはRequestedThemeの値に関係なく、ハイコントラストモード時の色が適用されます。