CheckBox のチェックの□の色を変更する

いわゆる、↓の□の色を変更します。

普通にやると、黒で表示されて、どうにも変更できません。が、XAML のスタイルを使って変更します。これ、何をやっても黒にしかならなくて、このような白い四角を表示したいときには、別途自作するとかしていたんですが、原因がわかりました。

XAML ファイルを Blend で開く。

「テンプレートの編集」→「コピーして編集」を選択すると、<Page.Resources> にスタイルが追加される。

アニメーションしている storyboard の中で、

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;Stroke&quot; Storyboard.TargetName=&quot;NormalRectangle&quot;>
   <DiscreteObjectKeyFrame KeyTime=&quot;0&quot; Value=&quot;{ThemeResource CheckBoxCheckBackgroundStrokeUncheckedPointerOver}&quot;/>
</ObjectAnimationUsingKeyFrames>

の3行をごっそり消します。
どうやら、ここで設定している CheckBoxCheckBackgroundStrokeUncheckedPointerOver などのリソースが「Black」固定になっているんですよね。テーマ色なので仕方がないんですが、ここの Storoke の色は、Setter Property を使って欲しかったところですね。

<Grid Height=&quot;32&quot; VerticalAlignment=&quot;Top&quot;>
    <Rectangle 
        x:Name=&quot;NormalRectangle&quot; 
        Fill=&quot;{ThemeResource CheckBoxCheckBackgroundFillUnchecked}&quot; 
        Height=&quot;20&quot; 
        Stroke=&quot;White&quot; 
        StrokeThickness=&quot;{ThemeResource CheckBoxBorderThemeThickness}&quot; UseLayoutRounding=&quot;False&quot; Width=&quot;20&quot;/>
    <FontIcon x:Name=&quot;CheckGlyph&quot; Foreground=&quot;{ThemeResource CheckBoxCheckGlyphForegroundUnchecked}&quot; FontSize=&quot;20&quot; FontFamily=&quot;{ThemeResource SymbolThemeFontFamily}&quot; Glyph=&quot;&#xE001;&quot; Opacity=&quot;0&quot;/>
</Grid>

でもって、最後のほうにある、NormalRectangle を見つけて、Stroke=”White” で色を設定しておきます。ここだけ設定しても、先の storyboard がそのままだと色が上書きされているのが、色が変わらない原因です。

要は、こんな感じなのを作りたかっただけです。

ちなみ、デザイン時のデータバインドを、

d:DataContext="{d:DesignData Source=/data/sample.json, Type=vm:MyViewModel}"

な感じで設定しているのですが、色のテーマを Dark にしようとして、Page タグに RequestedTheme=”Dark” を設定すると、↓な感じにバインドエラーがでます。

RequestedTheme を消すと、↓な感じでデザイン時のバインドが効くので、バグっぽいです。

なんだかなー。あとで調査してバグ報告しますか。