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

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top