How to wrap the text of the tab header in Tabbed View

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:

Wrap TabItem title

Sample for wrapping the header content can be downloaded from this link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_WrapHeader1683820519

Did you find this information helpful?

Yes

Comments (0)

How to wrap the text of the tab header in Tabbed View

XAML:

Output image:

Access denied