Windows Phone 8.1 应用程序中的按钮大小不是预期的 [英] Size of button in Windows Phone 8.1 App is not expected

问题描述

我是 Windows Phone 开发的新手，并尝试通过以下代码将 2 个按钮放入网格中:

I'm a newbie to Windows Phone Development and trying to place 2 buttons into a grid by following code:

<Grid Margin="10" Height="60">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Button MinWidth="50" Width="50" Height="60" Grid.Column="0" Background="Red" BorderThickness="0" Content="-"/>
    <Button MinWidth="50" Width="50" Height="60" Grid.Column="1" Background="Green" BorderThickness="0" Content="+"/>
</Grid>

但是按钮高度不是预期的，它总是小于定义的大小，即使高度越来越高(见图)

But the button height is not expected, it is always less than defined size even increasing height more and more (see pic)

我尝试设置填充和边距属性，但它不起作用.还有什么我需要设置的吗?

I tried to set padding and margin property but it does not work. Is there anything else which I need to set?

推荐答案

Button ControlTemplate 有一个边距设置为 PhoneTouchTargetOverhang 的边框，这会导致顶部和底部的边距/填充.

Button ControlTemplate has a Border with Margin set to PhoneTouchTargetOverhang which is causing the margin/padding on top and bottom.

因此，您可以使用的 ControlTemplate 是这样的:

So, the ControlTemplate you can use to avoid is this:

<ControlTemplate x:Key="ButtonControlTemplateNoPadding" TargetType="Button">
    <Grid x:Name="Grid" Background="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Pressed" To="PointerOver">
                        <Storyboard>
                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="PointerOver" To="Normal">
                        <Storyboard>
                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="Pressed" To="Normal">
                        <Storyboard>
                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver" />
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <PointerDownThemeAnimation Storyboard.TargetName="Grid" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
            <ContentPresenter x:Name="ContentPresenter" Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"
                Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                AutomationProperties.AccessibilityView="Raw"/>
        </Border>
    </Grid>
</ControlTemplate>

请注意，我删除了 ContentPresenter 周围的边框元素中的边距.默认版本的定义如下:

Notice that I removed the Margin in Border element around ContentPresenter.. The default version has it defined like this:

Margin="{ThemeResource PhoneTouchTargetOverhang}"

因此，在将该模板应用于按钮后，边距应该消失.

So, after you apply that template to your buttons, the margin should go away.

<Button MinWidth="50" Width="50" Height="60" Grid.Column="0" Background="Red" BorderThickness="0" Content="-" Template="{StaticResource ButtonControlTemplateNoPadding}" />
<Button MinWidth="50" Width="50" Height="60" Grid.Column="1" Background="Green" BorderThickness="0" Content="+" Template="{StaticResource ButtonControlTemplateNoPadding}"/>

这篇关于Windows Phone 8.1 应用程序中的按钮大小不是预期的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！