How to wrap the text of the tab header in .NET MAUI Tab View?
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
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!