読者です 読者をやめる 読者になる 読者になる

WindowsストアアプリUIコンポーネントの色の変更方法(SolidColorBrushのKeyを探す)

WindowsストアアプリのUIコンポーネントの色の変更方法ですが、テンプレートをコピーして編集する方法もあるのですが、お手軽なApp.xamlでSolidColorBrushを定義する方法を書いてきています。

WindowsストアアプリのComboBoxのアイテム選択ハイライト色を変える - YOMON8.NET
WindowsストアアプリのListViewのアイテム選択時の枠の色を変える - YOMON8.NET


この記事ではSolidColorBrushのx:Keyとして使う項目をどこから調べる方法を書きます。


上の例で言えばComboBoxの色を変えたい時に「ComboBoxItemSelectedBackgroundThemeBrush」や「ComboBoxItemSelectedPointerOverBackgroundThemeBrush」を探す方法となります。



まずは以下のフォルダに移動します。

C:\Program Files\Windows Kits\8.1\Include\winrt\xaml\design
または
C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design



ここに以下の2ファイルがあると思います。ここにデフォルトのXAMLのテーマの情報が格納されています。


この中からSolidColorBrushのKeyを探します。


例えばComboBoxに関連するSolidColorBrushのKeyを探したい場合、コマンドプロンプトPowerShellを使うことでファイルから目的のKeyを抽出することができます。

例えばPowerShellでComboBox関連のSolidColorBrushのKeyを探したければこんな感じです。
$uiCompの変数にUIコンポーネントの名前を入れて実行します。

$xamlDesignDir = "C:\Program Files\Windows Kits\8.1\Include\winrt\xaml\design"
$uiComp = "ComboBox"
Get-ChildItem -Path $XamlDesignDir | Get-Content | Select-String "SolidColorBrush" | Select-String $uiComp | ForEach-Object{$item = ($_.ToString()).Trim(); $item.Substring($item.IndexOf("x:Key"),$item.IndexOf("Color=")-$item.IndexOf("x:Key"))} | Sort-Object -Unique


結果は以下のようになります。Keyの意味は名前からだいたい推測できると思います。

x:Key="ComboBoxArrowDisabledForegroundThemeBrush"
x:Key="ComboBoxArrowForegroundThemeBrush"
x:Key="ComboBoxArrowPressedForegroundThemeBrush"
x:Key="ComboBoxBackgroundThemeBrush"
x:Key="ComboBoxBorderThemeBrush"
x:Key="ComboBoxDisabledBackgroundThemeBrush"
x:Key="ComboBoxDisabledBorderThemeBrush"
x:Key="ComboBoxDisabledForegroundThemeBrush"
x:Key="ComboBoxFocusedBackgroundThemeBrush"
x:Key="ComboBoxFocusedBorderThemeBrush"
x:Key="ComboBoxFocusedForegroundThemeBrush"
x:Key="ComboBoxForegroundThemeBrush"
x:Key="ComboBoxHeaderForegroundThemeBrush"
x:Key="ComboBoxItemDisabledForegroundThemeBrush"
x:Key="ComboBoxItemPointerOverBackgroundThemeBrush"
x:Key="ComboBoxItemPointerOverForegroundThemeBrush"
x:Key="ComboBoxItemPressedBackgroundThemeBrush"
x:Key="ComboBoxItemPressedForegroundThemeBrush"
x:Key="ComboBoxItemSelectedBackgroundThemeBrush"
x:Key="ComboBoxItemSelectedDisabledBackgroundThemeBrush"
x:Key="ComboBoxItemSelectedDisabledForegroundThemeBrush"
x:Key="ComboBoxItemSelectedForegroundThemeBrush"
x:Key="ComboBoxItemSelectedPointerOverBackgroundThemeBrush"
x:Key="ComboBoxPlaceholderTextForegroundThemeBrush"
x:Key="ComboBoxPointerOverBackgroundThemeBrush"
x:Key="ComboBoxPointerOverBorderThemeBrush"
x:Key="ComboBoxPopupBackgroundThemeBrush"
x:Key="ComboBoxPopupBorderThemeBrush"
x:Key="ComboBoxPopupForegroundThemeBrush"

他にもSearchBoxでやってみると、

x:Key="SearchBoxBackgroundThemeBrush"
x:Key="SearchBoxBorderThemeBrush"
x:Key="SearchBoxButtonBackgroundThemeBrush"
x:Key="SearchBoxButtonForegroundThemeBrush"
x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush"
x:Key="SearchBoxButtonPointerOverForegroundThemeBrush"
x:Key="SearchBoxDisabledBackgroundThemeBrush"
x:Key="SearchBoxDisabledBorderThemeBrush"
x:Key="SearchBoxDisabledTextThemeBrush"
x:Key="SearchBoxFocusedBackgroundThemeBrush"
x:Key="SearchBoxFocusedBorderThemeBrush"
x:Key="SearchBoxFocusedTextThemeBrush"
x:Key="SearchBoxForegroundThemeBrush"
x:Key="SearchBoxHitHighlightForegroundThemeBrush"
x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush"
x:Key="SearchBoxIMECandidateListSeparatorThemeBrush"
x:Key="SearchBoxPointerOverBackgroundThemeBrush"
x:Key="SearchBoxPointerOverBorderThemeBrush"
x:Key="SearchBoxPointerOverTextThemeBrush"
x:Key="SearchBoxSeparatorSuggestionForegroundThemeBrush"


これでUIの色を変えたい時に毎回Webを探す手間が無くなりそうです。