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) { } } }