调整Windows Universal Application

Question

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

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添加它们。