在 Windows 通用应用程序中调整复选框大小

Question

我的项目中有拥挤的页面，我想在单个页面中放置太多复选框控件，因此我正在寻找一种方法来调整 复选框 的大小。 当我更改复选框的高度和宽度时，其文本的某些部分消失了，换句话说，我需要缩放我的复选框并制作一些小复选框。

Answer 1

您当然可以使用 ScaleTransform 缩小它，但修改它的样式会给您更大的灵活性。

举个例子 -

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

基本上，您需要减小 NormalRectangle、CheckGlyph 和 FontSize 的大小。请注意，我已经删除了视觉状态以简化答案，您只需将它们从 default style.

添加回来