Articles in this section
Category / Section

How to wrap the text of the tab header in .NET MAUI Tab View?

3 mins read

The .NET MAUI Tab View allows you to organize content into tabs, providing a user-friendly interface. This section will guide you through the process of wrapping text in the tab headers to ensure a clean presentation, especially when dealing with longer text.

Step 1: XAML Configuration
Define XAML to include proper configurations for wrapping text in the tab headers. Ensure that the LineBreakMode property is set to WordWrap on the Label within the HeaderItemTemplate.

Step 2: Verify Text Wrapping
Setting the LineBreakMode to WordWrap allows the text to wrap within the available space. The MaxLines property can be adjusted to control the maximum number of lines before wrapping occurs. In the provided example, it is set to 2, meaning the text will wrap if it exceeds two lines.

XAML

<tabView:SfTabView ItemsSource="{Binding TabItems}" TabBarHeight="80">
     <tabView:SfTabView.HeaderItemTemplate>
         <DataTemplate>
         <StackLayout>
                 <Label Text="{Binding Name}" 
                        TextColor="Green" 
                        Padding="5,10,10,10" 
                        LineBreakMode="WordWrap" 
                        MaxLines="2" 
                        WidthRequest="100"/>
         </StackLayout>
         </DataTemplate>
     </tabView:SfTabView.HeaderItemTemplate>
     <tabView:SfTabView.ContentItemTemplate>
         <DataTemplate>
             <Label TextColor="Black"  
                    Text="{Binding ID}" />
         </DataTemplate>
     </tabView:SfTabView.ContentItemTemplate>
 </tabView:SfTabView>

Output

Screenshot 2023-12-15 112934.png

Conclusion
I hope you enjoyed learning how to wrap the text of the tab header in .NET MAUI Tab View.

Refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied