WPF や UWP のコントロールは見た目で選ぶのではなく機能で選ぼう

昔にもブログで書いたような気がするけど、最近また思ったので Qiita のほうにも書いておきます！

WPF/UWP のコントロールの特徴

見た目は完全に置き換え可能なように作られているということです。なので、見た目じゃなくて純粋に機能で選んだほうがいいという特徴があります。

例えば

先日、ReactiveProperty のサンプルで TodoMVC のような Todo リストアプリを作ってみたのですが、画面左上に一括チェックや一括チェック解除を行うチェックボックスがありました。

これは見た目はチェックボックスなのですが、どちらかというと押すと一括チェックや一括チェック解除の機能を実行して、見た目がたまたまチェックボックスみたいなボタンに近いかなと思いました。
なので、この部分は Button コントロールになっています。

該当部分の XAML は、こんな感じになっています。

<Button Command="{Binding CompleteAllCommand}"
        Focusable="False"
        Margin="5">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid Background="White">
                <Border Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
                    <CheckBox IsHitTestVisible="False" 
                          IsChecked="{Binding IsCompletedAllItems.Value, Mode=OneWay}" 
                          Focusable="False"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Border>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

Button の Template を差し替えて CheckBox の見た目にしています。あと CheckBox 自体は動いてほしくないので IsHitTestVisible に False を設定して押しても何もおきないようにしました。
これは、コントロールが見えてるだけの状態にすることが出来て稀に使う便利な機能なので存在を覚えておくといいと思います。

このボタンを押すと CompleteAllCommand に紐づいてる処理が動いて Todo のステータスが変わります。ステータスが変わった結果 IsCompletedAllItems の値が変わって CheckBox の IsChecked が更新されて見た目上はチェックがついたり外れたりします。

まとめ

ということで WPF/UWP は、コントロールの見た目を完全に置き換えることが出来るので、見た目は飾りと思って機能でコントロールを選択するようにしましょう。
ではでは。