Question

我的网格有多个行和列（如下所示），每个单元格中都有一个按钮，就像计算器一样。按钮的HorizontalAlignment和VerticalAlignment设置为“Stretch”

然而，由于不同的屏幕尺寸以及我需要保持其中单元格和控件的宽度和高度的相等大小，我给出了宽度和高度为*

我希望按钮因此填充它们所在的单元格，但它们不适合。您可以看到这是开发环境的屏幕截图。第一个按钮显示按钮边框的位置...... 它们实际上从侧面突然出现，并且在顶部和底部有大约8个像素的边距。

每个按钮中的文字都是一个数字，所以我知道文字的大小不是问题，并想知道是否有人有任何想法？我不想手动为每个按钮设置边距，因为这不仅耗费时间，而且如果应用程序在不同大小的屏幕上运行，它们可能适合。

        <Grid Grid.Row="2" x:Name="ButtonsGrid" Margin="18,9,18,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Content="1"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="1" Content="2" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="2" Content="3" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="3" Content="4" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <Button Grid.Row="1" Grid.Column="0" Content="5" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="1" Content="6" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="2" Content="7" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="3" Content="8" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <Button Grid.Row="2" Grid.Column="0" Content="9" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="2" Grid.Column="1" Content="0" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="2" Grid.Column="2" Content="Clear" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="2" />
    </Grid>

Screen shot from development environment

Answer 1

按钮具有一定的边距和填充，这就是它只能缩小到一定大小的原因。

您的单元格尺寸小于此尺寸，您可以通过编辑按钮的ControlTemplate来解决此问题。

Answer 2

我之前从未做过Windows Phone应用程序。但我在Wpf中做了这个示例。我希望对您的业务有所帮助

这是代码：

 <Grid Grid.Row="2" x:Name="ButtonsGrid">
    <Grid.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Margin" Value="2"/>
            <Style.Triggers>
                <Trigger Property="Tag" Value="btn_Login">
                    <Setter Property="Margin" Value="10,5,10,5"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" Content="1"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="0" Grid.Column="1" Content="2" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="0" Grid.Column="2" Content="3" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="0" Grid.Column="3" Content="4" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

    <Button Grid.Row="1" Grid.Column="0" Content="5" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="1" Content="6" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="2" Content="7" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="3" Content="8" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

    <Button Grid.Row="2" Grid.Column="0" Content="9" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="2" Grid.Column="1" Content="0" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="2" Grid.Column="2" Content="Clear" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="2" />

    <Button Tag="btn_Login" Grid.Row="3" Content="Login" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="4" />
</Grid>

Windows 8.1 xaml stretch不缩小按钮

2 个答案: