Set length of a TabItem

[KailangHuo]

I'm trying to build a dynamic select-able pages by using the TabControl - TabItem schemes just like the demo provided, this is my code:

 <Grid Height="300" Width="700">
            <TabControl Foreground="Black"
                        ItemsSource="{Binding TabList}"
                        ItemTemplate="{DynamicResource TabItemHeaderTemplate}"
                        ContentTemplate="{DynamicResource TabItemContentTemplate}"
            >
            </TabControl>
        </Grid>

However, the running application is not showing what i was expected. The TabItems are too long for the window, and for keeping their widths, they are wrapped as a column, which is not what I want:

It seems like it is forbidden to modify the length of the TabItem.
I also tried other ways.
I tried to add the ItemContainerStyle, its not working.
I tried to change the width of the tabcontrol, not working.
I tried to add the TabItem one by one and change their own width, this is what i got:

<TabControl Foreground="Black">
                <TabItem Header="hello" Width="100">
                    <TextBlock Text="World" Foreground="Black"/>
                </TabItem>
                <TabItem Header="你好">
                    <TextBlock Text="世界" Foreground="Black"/>
                </TabItem>
 </TabControl>

So, is there a proper way for me to do this? Am i using it in a wrong way?
Any help is appreciated!

[Mithicor]

Using the DataTemplate has worked for me. Try setting the width of the Control that is set inside the DataTemplate. So in my example, I would set the Width of the TextBox.

<TabControl ItemsSource="{Binding ViewModel.UserAssignments}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Margin="0,6" Width="100">
                <Run Text="{Binding AssignmentType}"/>
                <Run Text=" - "/>
                <Run Text="{Binding AssignmentList.Count, Mode=OneWay}"/>
            </TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>

    <TabControl.ContentTemplate>
        <DataTemplate>
             //TAB CONTENT GOES HERE
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

[KailangHuo]

Thanks, it worked!

[APerricone]

This code is not working anymore, the tabs are bigger than I want
because of

wpfui/src/Wpf.Ui/Controls/TabControl/TabControl.xaml

Line 79 in 397739b

MinWidth="180"

[saeelg-sg]

Facing the same issue

[saeelg-sg]

well following worked for me

<Grid>
    <TabControl x:Name="TabControl" Margin="5">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <Grid MinWidth="180">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <ui:TextBlock
                        Grid.Column="0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        FontTypography="Body"
                        Text="{Binding TabName}" />
                    <Button
                        Grid.Column="1"
                        Margin="0,0,0,0"
                        HorizontalAlignment="Right"
                        Background="Transparent"
                        BorderThickness="0"
                        Command="{Binding CloseCommand}"
                        Cursor="Hand"
                        ToolTip="Close Tab"
                        Visibility="{Binding CloseButtonVisibility}">
                        <Button.Content>
                            <ui:SymbolIcon Symbol="Dismiss12" />
                        </Button.Content>
                    </Button>
                </Grid>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentPresenter Content="{Binding TabContent}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

[APerricone]

yeah, you put MinWidth="180" in your grid, but it is not possible make it smaller or dynamic