Choose WPF and UWP controls by function, not by appearance

1 minute read

I feel like I wrote it on my blog a long time ago, but I thought about it again recently, so I will write it on Qiita as well!

WPF / UWP control features

It looks like it’s made to be completely replaceable. Therefore, there is a feature that it is better to select it purely by function, not by appearance.

For example

The other day, I tried to make a todo list application like TodoMVC with the sample of ReactiveProperty, but there was a check box in the upper left of the screen to perform batch check and batch uncheck.

image.png

This looks like a check box, but when I press it, it executes the functions of batch check and batch uncheck, and I think it looks like a button that happens to be a check box.
So this part is the Button control.

The XAML in that part looks like this.

<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>

It replaces the Template of the Button to make it look like a CheckBox. Also, I don’t want the CheckBox itself to move, so I set False to ʻIsHitTestVisible so that nothing happens when I press it.
It’s a good idea to keep in mind that this is a useful feature that you rarely use because you can just see the controls.

When you press this button, the process associated with CompleteAllCommand will move and the status of Todo will change. As a result of the status change, the value of ʻIsCompletedAllItems changes and ʻIsChecked of CheckBox is updated to be checked or unchecked in appearance.

Summary

So WPF / UWP can completely replace the look of a control, so think of it as a decoration and select the control by function.
See you soon.

You May Also Enjoy