Создать вертикальную навигацию в WPF

Question

Как создать вертикальную панель навигации, которая занимает столько места, сколько необходимо для каждой кнопки.

Пример с 3 кнопками внутри навигации:

Пример с 4 кнопками внутри навигации:

Обратите внимание, как высота кнопки изменяется и занимает столько места, сколько необходимо.

Моя попытка:

<Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="90"/>
    </Grid.ColumnDefinitions>
    <StackPanel/>
    <StackPanel Grid.Column="1">
      <Label HorizontalAlignment="Stretch" Background="Yellow">Yellow 1</Label>
    </StackPanel>
  </Grid>

Как я могу добиться этого WPF XAML?

Answer 1

Для вышеприведенного ответа, по Babbillumpa, мы не можем жестко кодировать Rows = 1 для UniformGrid.Для типа требования нам нужно упомянуть атрибут строки 3 или 4, если вы хотите, чтобы 3 или 4 кнопки были внутри UniformGrid.

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="90"/>
     </Grid.ColumnDefinitions>

     <UniformGrid Grid.Column="1" Rows="3">
         <Button Content="1" />
         <Button Content="2" />
         <Button Content="3" />
     </UniformGrid>
</Grid>

Answer 2

Если вы хотите жестко кодировать свои кнопки внутри xaml, вы можете использовать простую UniformGrid с Colums = "1"

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="90"/>
     </Grid.ColumnDefinitions>

     <UniformGrid Grid.Column="1" Columns="1">
         <Button Content="1" />
         <Button Content="2" />
         <Button Content="3" />
     </UniformGrid>
</Grid>

В противном случае, если вы хотите обрабатывать кнопки из ViewModel, вы можетеиспользуйте ItemsControl:

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="90"/>
     </Grid.ColumnDefinitions>

     <ItemsControl Grid.Column="1" ItemsSource="{Binding YourButtonVm}">
         <ItemsControl.ItemsPanel>
             <ItemsPanelTemplate>
                  <UniformGrid Columns="1"/>
             </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
         <ItemTemplate>
             <DataTemplate>
                 <Button Content="{Binding ButtonText}" Command="{Binding ButtonCommand}"/>
             </DataTemplate>
         </ItemTemplate>
     </ItemsControl>
</Grid>