Articles in this section
Category / Section

How to display the TabScroll button in WinRT TabControl?

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 TabScrollButtonVisibility property of SfTabControl as Visible. The same has been demonstrated in the following code example:

XAML:

<Page
x:Class="WinRT_KB_Application.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinRT_KB_Application"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
mc:Ignorable="d">
<Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
<navigation:SfTabControl x:Name="_Tabcontrol" 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>
</Grid>
</Page>

 

C#:

using Syncfusion.UI.Xaml.Controls;
using Windows.UI;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace WinRT_KB_Application
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
 
SfTabControl _Tabcontrol = new SfTabControl();
_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);
Grid1.Children.Add(_Tabcontrol);
}
 
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached.  The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
 

 

 

   

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