CODEWITHSUNDEEP
wpfxaml
BarrieA
BarrieA

Reputation: 3

Using XAML How do I add columns to a TabItem

How do I add columns to a TabItem, so that I can resize the columns with a splitter and have the controls stacked in each column resize at the same time?

I created the following XAML. I thought as the splitters were resized the buttons would resize with each column.

    <Grid Background="LightBlue">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <DockPanel Grid.Row="0" >
        <StackPanel>
          <TextBlock Text="Multiple items go here as the header" />
        </StackPanel>
      </DockPanel>
      <TabControl Grid.Row="1" Background="Beige" >
        <TabItem x:Name="Tab1" Header="Tab One" >
          <DockPanel>
            <StackPanel DockPanel.Dock="Top">
              <TextBlock Text="Header for this tab goes here" />
            </StackPanel>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <GridSplitter Grid.Column="1" VerticalAlignment="Stretch"
                            Background="Aqua" Width="4" />
              <GridSplitter Grid.Column="3" VerticalAlignment="Stretch"
                            Background="Aqua" Width="4" />
              <StackPanel Grid.Column="0" >
                <Button Content="Column 1" />
              </StackPanel>
              <StackPanel Grid.Column="2" >
                <Button Content="Column 2" />
              </StackPanel>
              <StackPanel Grid.Column="4" >
                <Button Content="Column 3" />
              </StackPanel>
            </Grid>
          </DockPanel>
        </TabItem>
        <TabItem x:Name="Tab2" Header="Tab Two" ></TabItem>
        <TabItem x:Name="Tab3" Header="Tab Three" ></TabItem>
      </TabControl>
    </Grid>

Upvotes: 0

Views: 231

Answers (1)

Pouya Abadi
Pouya Abadi

Reputation: 255

Just add ResizeBehavior="PreviousAndNext" to your GridSplitters and it will work.

GridSplitter.ResizeBehavior Property's default value is GridResizeBehavior.BasedOnAlignment which means

Space is redistributed based on the value of the HorizontalAlignment and VerticalAlignment properties.

Whatever that means. But you want PreviousAndNext which means

For a horizontal GridSplitter, space is redistributed between the rows that are above and below the row that is specified for the GridSplitter. For a vertical GridSplitter, space is redistributed between the columns that are to the left and right of the column that is specified for the GridSplitter.

Upvotes: 2

Related Questions