Выравнивание кнопок в окнах Телефон 8.1 Приложение

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

Smarter:

• для всех <Button> с:
  • изменения HorizontalAlignment к Stretch
  • установить их Margin «s влево и вправо до некоторой одинаковой величины, как 10,0,10,0

Или, если вам не нравится устанавливать эти поля для каждой кнопки (или любой другой кнопки), вы можете поместить в Grid.Resources a Style с некоторыми Setter s, которые будут устанавливать все кнопки.

Или, если вы не хотите устанавливать наценки на кнопки, вы можете:

• для всех <Button> с:
  • изменения HorizontalAlignment к Stretch
• для Grid, который держит их:
  • установить его Margin влево и вправо, чтобы некоторые идентичное значение, как 10,0,10,0

но последний вариант предполагает, что есть что-то вокруг этой сетки, которая повинуется Поля. Обычно это правда, но кто знает, что в вашем приложении.

На самом деле, я рекомендую вам попробовать и поиграть со всеми этими вариантами. Все они похожи, но это разные вещи. Было бы неплохо понять/почувствовать разницу, так как это облегчит вам макетирование в WPF.

Отказ от ответственности: существуют другие способы достижения аналогичного результата. Я не пытался перечислить все из них, просто простейшие/наиболее очевидные.

*) содержимое кнопок будет автоматически совмещаться друг с другом, поскольку определения содержания каждой кнопки содержат сетку с одинаковой формой: 0.25*/1.0* столбцов. После того, как все кнопки имеют одинаковые внешние размеры, внутренние столбцы будут разделять пространство таким же образом и будут иметь одинаковые размеры изображений и текстов. Конечно, предполагая, что достаточно места для удовлетворения MinWidth/MinHeight/etc каждого элемента.