Size of button in Windows Phone 8.1 App is not expected

问题

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?

回答1:

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

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>

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}"/>

来源：https://stackoverflow.com/questions/24725005/size-of-button-in-windows-phone-8-1-app-is-not-expected