在Windows Phone 8.1 App中对齐按钮

Question

我正在尝试在窗口上对齐4个按钮。 当前窗口如下所示：

我们看到前两个按钮的大小相同，并且图像和文本对齐。 由于第三个和第四个按钮（即“设置”和“关于”）中的文本比前两个小，因此这些按钮变得更小，并且图像也与前两个按钮不对齐。 如何增加尺寸或对齐第三个和第四个按钮。 我当前的XAML是：

<Grid Background="#FF89A8D4">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.25*" />
        <RowDefinition Height="0.25*"/>
        <RowDefinition Height="0.25*"/>
        <RowDefinition Height="0.25*" />
    </Grid.RowDefinitions>
    <Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF16767" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/new.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="Create Note"   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>
    <Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF6060EC" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/search.png" Grid.Column="0" Margin="10"/>
            <TextBlock Text="Search Note" Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>

    <Button Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFB09F9F" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/settings.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="Settings"   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>

    <Button Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF899E3F" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/about.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="About  "   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>
</Grid>

Answer 1

使用您的布局*），最简单的方法是：

• 对于所有<Button> ：
  • 离开HorizontalAlignment = Center
  • 将Width设置为相同的值，例如160

智慧：

• 对于所有<Button> ：
  • 将HorizontalAlignment更改为Stretch
  • 将其Margin的left和right设置为相同的值，例如10,0,10,0

或者，如果您不喜欢为每个按钮（或任何其他每个按钮）设置边距，则可以放入Grid.Resources一个带有一些Setter的Style来设置所有按钮。

或者，如果您不想在按钮上设置边距，则可以：

• 对于所有<Button> ：
  • 将HorizontalAlignment更改为Stretch
• 对于持有它们的Grid ：
  • 将其Margin的left和right设置为相同的值，例如10,0,10,0

但是最后一个选项假设网格周围有遵守边距的东西。 通常情况是对的，但是谁知道您的应用程序中包含什么。

实际上，我鼓励您尝试使用所有这些选项。 它们看起来都很相似，但是含义却有所不同。 最好理解/感觉到差异，因为这将使您以后在WPF中更轻松地进行布局。

免责声明：还有其他方法可以达到类似的结果。.我并未尝试列举所有方法，只是最简单/最显而易见的方法。

*）按钮的内容将自动彼此对齐，因为每个按钮的内容定义包含具有相同形状的网格： 0.25*/1.0*列。 一旦所有按钮都具有相同的外部尺寸，内部列将以相同的方式分割空间，并且将赋予图像和文本相同的尺寸。 当然，假设有足够的空间来满足每个元素的MinWidth / MinHeight / etc。