在 WPF 中创建垂直导航

debugcn 发表于 Dev

夜景

我如何创建一个垂直导航栏，每个按钮都需要尽可能多的空间。

导航内有 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？

巴比伦帕

如果要在 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。