how to maintain the Width of tabItems should be equal in WPF?

Question

how to maintain the width of the tabItems should be equal if i open multiple tabItems. know i am not getting this thing. i tried the following code

HorizontalContentAlignment="stretch"

i used the above code but it is not working. but i am getting like this

enter image description here

for tabcontrol i write the following code

<TabControl Name="tabControl1" Margin="175,44,0,0"  >

            <Grid></Grid>
    </TabControl>

tabItems will dynamically adding to the Tabcontrol

TabItem tabitem2 = new TabItem();
        Page2 pgobj1 = new Page2();
        Frame tabframe1 = new Frame();
        tabframe1.Content = pgobj1;
        tabitem2.Header = "Tab 2Tab 2Tab 3";
        tabitem2.Width = 300;
        tabitem2.Content = tabframe1;          
        tabControl1.Items.Add(tabitem2);
        tabitem2.IsSelected = true;

i don't want those spaces in between the tabItems. and they automatically resize if more number of tabs are opened. kindly help me out in this.

After removing the Hardcoded width property

enter image description here it comes like this

score 1 · Accepted Answer · edited May 23 '17 at 12:24

Remove hardcoded width you are setting on TabItem. No need to set that, TabItem will automatically adjust its width base on header content.

tabitem2.Width = 300; // Remove this line

If you want items to come in single line and scroll using ScrollViewer, you need to modify Template of TabControl like mentioned here. I am posting the code from there for the sake of completeness of answer:

    <TabControl Name="tabControl1">
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <StackPanel>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                                  VerticalScrollBarVisibility="Disabled">
                        <TabPanel x:Name="HeaderPanel"
                          Panel.ZIndex ="1" 
                          KeyboardNavigation.TabIndex="1"
                          Grid.Column="0"
                          Grid.Row="0"
                          Margin="2,2,2,0"
                          IsItemsHost="true"/>
                    </ScrollViewer>
                    <ContentPresenter x:Name="PART_SelectedContentHost"
                                      SnapsToDevicePixels="{TemplateBinding 
                                                            SnapsToDevicePixels}"
                                      Margin="{TemplateBinding Padding}"
                                      ContentSource="SelectedContent"/>
                </StackPanel>
            </ControlTemplate>
        </TabControl.Template>
    </TabControl>

Also check out this answer here.

if i remove that line it is going to new line. how to restrict that one — Pallavi, Jan 04 '14 at 16:51
If actual window size can't fit tabItems, they are moved like you posted in snapshot. That's how even tabItems works in Windows. Isn't that you required? — Rohit Vats, Jan 04 '14 at 17:04
What about tabItems which can't be accommodated? What you want to do with those tabItems? — Rohit Vats, Jan 04 '14 at 17:19
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44506/discussion-between-pallavi-and-rohit-vats) — Pallavi, Jan 04 '14 at 17:20

score 1 · Answer 2 · answered Jan 04 '14 at 17:10

If I understand you correctly, you want that all tab items should have equal width. You can achieve that by wrapping each tab item header inside a Grid with a ColumnDefinition that uses a SharedSizeGroup. Furthermore, you must mark the TabControl like this:

<TabControl x:Name="tabControl1" Grid.IsSharedSizeScope="True">

The following code shows how to set the Header property programmatically:

Grid grid = new Grid();
grid.ColumnDefinitions.Add(new ColumnDefinition
    {
        SharedSizeGroup = "MySharedSizedGroupName",
        Width = new GridLength(1.0, GridUnitType.Auto)
    });
grid.Children.Add(new TextBlock{Text="Tab 5"});
tabitem2.Header = grid;

EDIT: And one other point: I think the <Grid></Grid> you have added as a child to the TabControl is unnecessary, because it creates that empty tab on the left side in the first tab row.

@Pallavi: You need to add a left and right scroller to the tab panel. This web page shows an example: http://rickdoes.net/post/2009/11/06/WPF-Single-Row-Tab-Control.aspx . — , Jan 04 '14 at 17:27

how to maintain the Width of tabItems should be equal in WPF?

2 Answers2