在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。