Category / Section
How to display the TabScroll button in the SfTabControl?
1 min read
TabScroll buttons are used for navigating to SfTabItems which are arranged out of the viewport of SfTabControl. This Tab Scroll buttons can be displayed by setting the TabScrollButton Visibility property of SfTabControl as Visible.
The same has been demonstrated in the following code example:
<navigation:SfTabControl Name="tabcontrol" Width="700" Height="400" VerticalAlignment="Center" HorizontalAlignment="Center" TabScrollButtonVisibility="Visible"> <navigation:SfTabItem Header="Item1"/> <navigation:SfTabItem Header="Item2"/> <navigation:SfTabItem Header="Item3"/> <navigation:SfTabItem Header="Item4"/> <navigation:SfTabItem Header="Item5"/> <navigation:SfTabItem Header="Item6"/> <navigation:SfTabItem Header="Item7"/> <navigation:SfTabItem Header="Item8"/> <navigation:SfTabItem Header="Item9"/> <navigation:SfTabItem Header="Item10"/> </navigation:SfTabControl>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfTabControl _Tabcontrol = new SfTabControl();
_Tabcontrol.ShowTabstripMenu = true;
_Tabcontrol.Height = 400;
_Tabcontrol.Width = 700;
_Tabcontrol.TabScrollButtonVisibility = TabScrollButtonVisibility.Visible;
SfTabItem tab1 = new SfTabItem();
tab1.Header = "Item1";
SfTabItem tab2 = new SfTabItem();
tab2.Header = "Item2";
SfTabItem tab3 = new SfTabItem();
tab3.Header = "Item3";
SfTabItem tab4 = new SfTabItem();
tab4.Header = "Item4";
SfTabItem tab5 = new SfTabItem();
tab5.Header = "Item5";
SfTabItem tab6 = new SfTabItem();
tab6.Header = "Item6";
SfTabItem tab7 = new SfTabItem();
tab7.Header = "Item7";
SfTabItem tab8 = new SfTabItem();
tab8.Header = "Item8";
SfTabItem tab9 = new SfTabItem();
tab9.Header = "Item9";
SfTabItem tab10 = new SfTabItem();
tab10.Header = "Item10";
_Tabcontrol.Items.Add(tab1);
_Tabcontrol.Items.Add(tab2);
_Tabcontrol.Items.Add(tab3);
_Tabcontrol.Items.Add(tab4);
_Tabcontrol.Items.Add(tab5);
_Tabcontrol.Items.Add(tab6);
_Tabcontrol.Items.Add(tab7);
_Tabcontrol.Items.Add(tab8);
_Tabcontrol.Items.Add(tab9);
_Tabcontrol.Items.Add(tab10);
grid.Children.Add(_Tabcontrol);
}
}
}
The following screenshot displays the Tabscroll Button
