How to set a fixed width for the header of TabViewItem in TabView

Question

There is a TabWidthMode property for TabView to specify the width of the tabs. But I want to set a fix width for each tabs. So how to do it? I have a Style setting for the TabViewItem, but I don't know how to add the Width property into them.

<TabView.Resources>
    <Style TargetType="TabViewItem">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate x:DataType="local:ReportTabSource">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Symbol="Document" />
                        <TextBlock Text="{x:Bind HeaderText}" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabView.Resources>

Answer 1

You can change MinWidth and MaxWidth

For example I get a big header by changing "Document 1" header to 500 in a test from WinUI 3 Gallery :

  <muxc:TabViewItem Header="Document 1" MinWidth="500" MaxWidth="500">
      <muxc:TabViewItem.IconSource>
          <muxc:SymbolIconSource Symbol="Placeholder" />
      </muxc:TabViewItem.IconSource>
      <samplepages:SamplePage2 />
  </muxc:TabViewItem>

Answer 2

Hello,

Welcome to Microsoft Q&A!

As far as I'm concerned, you couldn't set a fix width for each tab. If you want each tab to adjust its width to the content within the tab. You could try to set the SizeToContent to the TabWidthMode Property.

Thank you.

Jeanine

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.