对齐Windows Phone 8.1应用程序中的按钮

Question

我正在尝试对齐窗口上的4个按钮。目前窗口看起来像这样：

我们看到前两个按钮大小相同，图像和文本对齐。 由于第三和第四按钮中的文本，即设置＆amp;约小于前两个，按钮变小，图像也不与前两个按钮对齐。 如何增大尺寸或对齐第三个和第四个按钮。 我目前的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＆＃39;左右设置为某个相同的值，例如10,0,10,0

或者，如果您不想设置每个按钮的边距（或任何其他每个按钮）设置，您可以将Grid.Resources Style与Setter放在一起<Button>这将设置所有按钮。

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

所有HorizontalAlignment的
• ：
  • 将Stretch更改为Grid
• 表示持有它们的Margin：
  • 将其10,0,10,0＆＃39;左右设置为某个相同的值，例如0.25*/1.0*

但是最后一个选项假设该网格周围存在一些服从边距的东西。通常它是真的，但谁知道你的应用程序中有什么。

实际上，我鼓励您尝试使用所有这些选项。所有这些看起来都很相似，但它们意味着一些不同的东西。理解/感受差异对您有好处，因为它将使您在以后更容易在WPF中进行布局。

免责声明：还有其他方法可以达到类似的结果。我没有尝试列举所有这些，只是最简单/最明显的。

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