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