Changing the size of a checkbox and the check mark in it

Question

My application will be run on computers with touch screens, operated by police officers while driving. I'm making all of the graphical elements larger so they can be operated by people with sausage fingers like my own and bigger.

I've got a CheckBox that needs to appear on a screen. I need to scale the size of the check box and the check mark bigger. I tried editing the template for the Checkbox in Expression Blend by right-clicking and choosing Edit Template | Edit a Copy. I set up the copy so it would apply to all check boxes.

I was able to make the box bigger by template binding it's height & width properties to the control's ActualHeight. However, the check mark did not grow as a result of that and is in the upper left corner. It doesn't look right, to say the least.

When I edited the template, here's the Xaml I got back:

<Style TargetType="{x:Type CheckBox}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                    <BulletDecorator.Bullet>
                        <Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{TemplateBinding ActualHeight}" Height="{TemplateBinding ActualHeight}"/>
                    </BulletDecorator.Bullet>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                        <Setter Property="Padding" Value="4,0,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Expression Blend will not let me edit the BulletChrome's template. The Edit Current and Edit a Copy choices are disabled.

How do I accomplish what I want to do?

Tony

Solution 1

The XAML for the default a made up example of a BulletDecorator can be found here on MSDN. Almost the entire chunk of XAML on that page deals with the appearance and behavior of the BulletDecorator.

At the heart of all that XAML are two Path objects. The first for the checkmark, and the second for the indeterminate mark (though the name 'InderminateMark' is spelled wrong in the sample XAML. Fortunately, it's spelled consistently wrong everywhere in the CheckBox example, so it's OK.

            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="CheckMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 0 L 7 7 M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>
            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="InderminateMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>

As pointed out by H.B. in the comments, the default WPF themes can be found here.

Solution 2

Not perfect, but it works. You style the TextBlock (e.g. FontSize, Height ...) and the checkmark grows with the TextBlock.

<StackPanel Name="CheckBoxPanel" Orientation="Horizontal">
    <Viewbox Height="{Binding Path=ActualHeight, ElementName=CheckBoxPanel}">
        <CheckBox />
    </Viewbox>
    <TextBlock /> <!-- for CheckBox Content -->
</StackPanel>

Solution 3

If you change the size then you will have to also change the path, paths are fixed to the size. If you have a path already and just want to scale it you can increase all the number values proportionately.

I recently needed to change MSDN's example custom checkbox [x] style into a tick mark (https://msdn.microsoft.com/en-us/library/ms752319(v=vs.85).aspx), and here the path is before and after.

<Path Visibility="Collapsed"
    Width="7"
    Height="7"
    x:Name="CheckMark"
    SnapsToDevicePixels="False"
    StrokeThickness="2"
    Data="M 0 0 L 7 7 M 0 7 L 7 0">
    <Path.Stroke>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
    </Path.Stroke>
</Path>

<Path Visibility="Collapsed"
    Width="9"
    Height="9"
    x:Name="CheckMark"
    SnapsToDevicePixels="False"
    StrokeThickness="2"
    Data="M 1 4.5 L 4 7.5 M 4 7.5 L 8 1">
    <Path.Stroke>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
    </Path.Stroke>
</Path>

Both of these examples have a path with two lines that use XY coodinates for their start and end position. Notice in the first image the numbers range from 0 to 7 and the size is 7x7. Also notice in the second image (the tick) i increased the size to 9x9.

All i did to make these was adjust the numbers for the start and end vector2 positions of each line to get the tick shape.

An alternative to manual editing is to download the free version of 'Microsoft Expression Design 4'. You can then make a new image at the desired size then use the EXPORT function and select a XAML file format, then check the file produced and take the path from it.

Solution 4

What you're looking for is the Path that actually is the check mark and will need to edit it. If you check out this article's section on custom checkbox work in WPF it shows you essentially how to do it pretty simple. If you would like further example, I can kick one out pretty darn quick after work a bit later today. Cheers!

View more solutions

Comments

[H.B.]

Those pages on MSDN do not give you the default templates but made-up examples. (See this for defaults)

[Stewbob]

@H.B. Thanks, I wasn't aware that those examples were not the default. That would explain some of the inconsistencies that I've noticed with them.

[Tony Vitabile]

After discussing it with my boss, I'm going to be taking the customization even further. He wants the check boxes to look more like Radio Buttons, just not round. He wants a border that's then filled with a dark color of a decent size to be easy to see. As it is, the check marks are too easy to miss while you're driving. Making them stand out is important.