CODEWITHSUNDEEP
wpfxaml
Nightscape
Nightscape

Reputation: 464

Create vertical navigation in WPF

How can I create a vertical navigation bar, which takes as much space as needed for each button.

Example with 3 Buttons inside the navigation: enter image description here

Example with 4 Buttons inside the navigation: enter image description here

Notice how the height of the Button changes and only takes as much space as needed.

My try:

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

How could i achieve this WPF XAML?

Upvotes: 0

Views: 224

Answers (2)

Babbillumpa
Babbillumpa

Reputation: 1864

If you want to hard-code your buttons inside the xaml, you can use a simple UniformGrid with 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>

Otherwise, if you want handle the buttons from the ViewModel you can use an 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>

Upvotes: 1

Chirantar
Chirantar

Reputation: 109

For the above answer, by Babbillumpa we cant hardcode Rows = 1 for UniformGrid. For the type of requirement, we need to mention Row attribute to 3 or 4 if you want 3 or 4 buttons inside 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>

Upvotes: 1

Related Questions