Resizing Checkboxes in Windows Universal Application

Question

I have crowded Page in my project and I want to place too many Checkbox control in a single page, so I'm looking for a way to resize my checkboxes. When I change height and width of my checkbox, some part of its text disappear, In other word I need to scale my checkbox and make some tiny checkbox.

Answer 1

You can of course scale it down by using ScaleTransform but modifying its style gives you more flexibility.

Here's an example -

<Style x:Key="TinyCheckBoxStyle"
               TargetType="CheckBox">
            <Setter Property="Padding"
                    Value="4,0,0,0" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Left" />
            <Setter Property="FontSize"
                    Value="11" />
            <Setter Property="MinWidth"
                    Value="0" />
            <Setter Property="MinHeight"
                    Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid x:Name="RootGrid"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <VisualStateManager.VisualStateGroups>
                                <!-- Add default visual states back in here -->
                            </VisualStateManager.VisualStateGroups>

                            <Grid>
                                <Rectangle x:Name="NormalRectangle"
                                           Fill="{ThemeResource CheckBoxCheckBackgroundFillUnchecked}"
                                           Height="12"
                                           Stroke="{ThemeResource CheckBoxCheckBackgroundStrokeUnchecked}"
                                           StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                                           UseLayoutRounding="False"
                                           Width="12" />
                                <FontIcon x:Name="CheckGlyph"
                                          Foreground="{ThemeResource CheckBoxCheckGlyphForegroundUnchecked}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          Glyph="&#xE001;"
                                          Opacity="0" />
                            </Grid>
                            <ContentPresenter x:Name="ContentPresenter"
                                              AutomationProperties.AccessibilityView="Raw"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              Content="{TemplateBinding Content}"
                                              Grid.Column="1"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"
                                              TextWrapping="Wrap"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Basically, you need to reduce the size of NormalRectangle, CheckGlyph and the FontSize. Note I have removed the visual states to simplify the answer, you just need to add them back from the default style.