Question

如何创建垂直导航栏，该导航栏占用每个按钮所需的空间。

在导航中带有3个按钮的示例：

在导航内带有4个按钮的示例：

请注意Button的高度如何变化，并且仅占用所需的空间。

我的尝试：

<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

如果要在xaml中对按钮进行硬编码，则可以使用带有Colums =“ 1”的简单UniformGrid

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

Answer 2

对于上述答案，Babbillumpa不能为UniformGrid硬编码Rows = 1。对于需求类型，如果要在UniformGrid中使用3或4个按钮，我们需要将Row属性提到3或4。

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

在WPF中创建垂直导航

2 个答案: