Share via

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

C CB 150 Reputation points
2024-07-04T02:44:23.1733333+00:00

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>
Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
749 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,603 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
789 questions
0 comments
Accepted answer
  1. Castorix31 83,021 Reputation points
    2024-07-04T06:48:04.02+00:00

    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>
    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Jeanine Zhang-MSFT 9,431 Reputation points Microsoft Vendor
    2024-07-04T06:21:57.76+00:00

    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.

    0 comments