TabControl - all TabItems Headers width is always set to the widest tab

[ahmed-abdelrazek]

beside #2602 using the example from the demo (changing HorizontalContentAlignment to left or right) but changing the second header to add more text will result in both tabs to have the second tab width (the widest tab)
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid"> <TabItem Header="TAB1"> <TextBlock Margin="8" Text="Full-width secondary example tab 1" /> </TabItem> <TabItem Header="TABBBBBBBBBBBBBBBBBBBB 2"> <TextBlock Margin="8" Text="Full-width secondary example tab 2" /> </TabItem> </TabControl>

also it's doesn't handle overflow

[ahmed-abdelrazek]

changing this to tabpanel, stackpanel or wrappanel should fix the issue

MaterialDesignInXamlToolkit/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

Lines 54 to 61 in 24c6468

	<UniformGrid
	x:Name="HeaderPanel"
	HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalAlignment="Top"
	Focusable="False"
	IsItemsHost="True"
	KeyboardNavigation.TabIndex="1"
	Rows="1" />

[veiny]

UniformGrid`s children elements are same width/height.

[ahmed-abdelrazek]

@veiny yeah that's what i found after looking into the code to track the issue changing the uniformgrid to any panel i suggested should fix the size thing if it was not intentional
but we will still have the overflow thing to handle do we need them stacked on top of each other or do we need a scrollbar when they all at the same line
martial design seems to implement a hidden scrollbar https://material.io/components/tabs#interactive-demo

[MichelMichels]

I would go with the scrollbar as per spec.

As for the UniformGrid, I updated the TabControl a while ago and I can't remember if I put the UniformGrid there or if it was already present. Anyhow, the Material spec is not clear in wether this should be all the same width or not. All the examples have a same-width header so I did not think further than that. I think UniformGrid is used to achieve a full-width (accross the screen) TabControl and have the headers spaced evenly.

[ahmed-abdelrazek]

i think having the same width is ok when tabs are centered but is not when its alignment is set to right or left

[MichelMichels]

i think having the same width is ok when tabs are centered but is not when its alignment is set to right or left

This seems like a good compromise.