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.

Have you checked out the [default style](https://msdn.microsoft.com/en-us/library/windows/apps/mt299114.aspx?f=255&MSPPError=-2147217396) of the `CheckBox`? They have a min width of `120`. — Justin XL, Jul 05 '17 at 09:04
Is it for a Phone? Because then your users also need tiny fingers. — H H, Jul 05 '17 at 09:26
This is a symptom of a bad UI design. You shouldn't need this, look for other solutions. — H H, Jul 05 '17 at 09:26
No, its not for phone application, It is an Application which runs on a Raspberry pi, so I need to change control size — D.Ghiaseddin, Jul 05 '17 at 09:33
"... on a Raspberry pi", so they will need even smaller fingers then. — H H, Jul 05 '17 at 09:45
Tiny? How tiny? How does it look like? You need to improve your question. An image would be helpful. — Justin XL, Jul 05 '17 at 09:46
It is a special device and I need to scale down my control, It is impossible to list here all of my constraints and needs. — D.Ghiaseddin, Jul 05 '17 at 09:50

score 6 · Accepted Answer · answered Jul 05 '17 at 10:21

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.

That was exactly what I want, I'm sorry that I did not ask the question properly. — D.Ghiaseddin, Jul 05 '17 at 10:27
No worries. That's why there's an Edit button for questions. :) — Justin XL, Jul 05 '17 at 10:30
@JustinXL thanks very nice. How do I learn how to do the same with say a `ComboBox`? I tried.. — Allstar, Mar 04 '21 at 08:36

Resizing Checkboxes in Windows Universal Application

1 Answers1