Windows Phone 8.1应用程序中的按钮大小不是预期的

Question

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

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

但按钮高度不是预期的,它总是小于定义的尺寸,甚至越来越高的高度(见图)

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

Answer 1

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

所以,你可以使用的ControlTemplate是这样的:

<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周围删除了Border元素中的Margin ..默认版本定义如下:

Margin="{ThemeResource PhoneTouchTargetOverhang}"

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

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