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