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

Answer 1

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>