Category / Section
How to wrap the text of the tab header in Tabbed View
1 min read
You can wrap the header content of SfTabView by adding the header content with label. Follow the given steps to wrap the header content:
Step 1: Add the necessary assemblies in PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding
SfTabView to your project.
Step 2: Add the header content with the label and set its LineBreakMode to "WordWrap".
XAML code for wrapping the header content:
XAML:
<tabView:SfTabItem x:Name="tab1"> <tabView:SfTabItem.HeaderContent> <StackLayout> <Label Text="SfTabView Numbers" LineBreakMode="WordWrap"/> </StackLayout> </tabView:SfTabItem.HeaderContent> </tabView:SfTabItem>
XAML code for adding the TabView with header content.
<ContentPage.Content > <tabView:SfTabView x:Name="tabView" TabHeight="55" TabHeaderPosition="Top" > <tabView:SfTabItem x:Name="tab1"> <tabView:SfTabItem.HeaderContent> <StackLayout> <Label Text="SfTabView Numbers" LineBreakMode="WordWrap"/> </StackLayout> </tabView:SfTabItem.HeaderContent> </tabView:SfTabItem> <tabView:SfTabItem x:Name="tab2"> <tabView:SfTabItem.HeaderContent> <StackLayout> <Label Text="SfTabView Fruits" LineBreakMode="WordWrap"/> </StackLayout> </tabView:SfTabItem.HeaderContent> </tabView:SfTabItem> <tabView:SfTabItem x:Name="tab3"> <tabView:SfTabItem.HeaderContent> <StackLayout> <Label Text="SfTabView Countries" LineBreakMode="WordWrap"/> </StackLayout> </tabView:SfTabItem.HeaderContent> </tabView:SfTabItem> </tabView:SfTabView> </ContentPage.Content>
Output image:
Sample for wrapping the header content can be downloaded from this link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_WrapHeader1683820519
