In TabControlExt, TabScroll buttons appearance can be customized by using TabPanelAdvStyle. The following code demonstrates the same. Code Example: [Xaml] <!-- Customizing TabPanelAdv Style --> <Style x:Key="TabPanelAdvStyle" TargetType="{x:Type syncfusion:TabPanelAdv}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type syncfusion:TabPanelAdv}"> <DockPanel LastChildFill="True"> <!-- TabScrollButtons --> <Button Name="PART_LastTab" Focusable="False" DockPanel.Dock="Right" Tag="LastTab" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <Button Name="PART_NextTab" Focusable="False" DockPanel.Dock="Right" Tag="NextTab" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <Button Name="PART_PrevTab" Focusable="False" DockPanel.Dock="Right" Tag="PrevTab" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <Button Name="PART_NextPage" Focusable="False" DockPanel.Dock="Right" Tag="NextPage" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <Button Name="PART_PrevPage" Focusable="False" DockPanel.Dock="Right" Tag="PrevPage" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <Button Name="PART_FirstTab" Focusable="False" DockPanel.Dock="Right" Tag="FirstTab" Visibility="Collapsed" Style="{StaticResource TabScrollingButton}"/> <ContentPresenter x:Name="PART_TabItems" ContentSource="TabItems" DockPanel.Dock="Right" Margin="0,0,0,-1" Content="{TemplateBinding Content}"/> </DockPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Customizing TabScrollButton style --> <Style x:Key="TabScrollingButton" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <!-- For TabScrollButtons Border color customization --> <shared:Border3D x:Name="PART_Border" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="1,0,0,0" Padding="1" Width="15" Height="15" Background="Lime" BorderThickness="1" BorderBrush="Yellow" Opacity="{TemplateBinding Opacity}" IsEnabled="{TemplateBinding IsEnabled}" SnapsToDevicePixels="True" CornerRadius="0"> <!-- For TabScrollButtons Arrow color customization --> <Canvas Width="8" Height="7" x:Name="canvas" VerticalAlignment="Center" HorizontalAlignment="Center" > <Path Data="M0,0L4,3.5 0,7" HorizontalAlignment="Center" Stroke="Yellow" Fill="Yellow" Name="PART_Path1" VerticalAlignment="Center"/> <Path Data="M4,0L8,3.5 4,7" HorizontalAlignment="Center" Stroke="{StaticResource Aero.ButtonInactivePathBrush}" Fill="{StaticResource Aero.ButtonInactivePathBrush}" Name="PART_Path2" VerticalAlignment="Center"/> </Canvas> </shared:Border3D> <ControlTemplate.Triggers> <!-- For Previous tab function --> <MultiTrigger > <MultiTrigger.Conditions> <Condition Property="shared:SkinStorage.EnableTouch" Value="false"/> <Condition Property="Tag" Value="PrevTab"/> </MultiTrigger.Conditions> <Setter TargetName="PART_Path1" Property="Data" Value="M4,0L0,4 4,8"/> <Setter TargetName="PART_Path2" Property="Visibility" Value="Collapsed"/> </MultiTrigger> <!-- For Next tab function --> <Trigger Property="Tag" Value="NextTab"> <Setter TargetName="PART_Path2" Property="Visibility" Value="Collapsed"/> </Trigger> <!-- TabScrollButtons MouseHover --> <MultiTrigger > <MultiTrigger.Conditions> <Condition Property="shared:SkinStorage.EnableTouch" Value="false"/> <Condition Property="IsMouseOver" Value="True"/> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="PART_Border" Value="Lime"/> <Setter Property="BorderBrush" TargetName="PART_Border" Value="Red"/> <Setter Property="Stroke" TargetName="PART_Path1" Value="Red"/> <Setter Property="Fill" TargetName="PART_Path1" Value="Red"/> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- TabControlExt --> <syncfusion:TabControlExt Grid.Row="1" ItemsSource="{Binding ModelItems}" TabPanelStyle="{StaticResource TabPanelAdvStyle}" TabScrollButtonVisibility="Visible" TabStripPlacement="Top" x:Name="Tab"> <syncfusion:TabItemExt Header="Tab1"/> <syncfusion:TabItemExt Header="Tab2"/> <syncfusion:TabItemExt Header="Tab3"/> <syncfusion:TabItemExt Header="Tab4"/> <syncfusion:TabItemExt Header="Tab5"/> <syncfusion:TabItemExt Header="Tab6"/> <syncfusion:TabItemExt Header="Tab7"/> <syncfusion:TabItemExt Header="Tab8"/> <syncfusion:TabItemExt Header="Tab9"/> <syncfusion:TabItemExt Header="Tab10"/> </syncfusion:TabControlExt> Screenshot Figure: TabScrollButtons backcolor and forecolor customized. Figure: TabScrollButtons backcolor and forecolor customized when hovering. Sample: TabControlExtSample
Change tab navigation button size WinForms Tab Control has the collection of TabPrimitives which used to display the navigation buttons. We have maintained the navigation buttons size internally. This navigation button size can be customized using reflection. The following code demonstrates the same. C# //Add reflection namespace using System.Reflection; //TabControlAdv Item size this.tabControlAdv1.ItemSize = new Size(this.tabControlAdv1.ItemSize.Width, 50); //Set the TabPrimitive size foreach (TabPrimitive item in this.tabControlAdv1.TabPrimitivesHost.TabPrimitives) { var obj = item; FieldInfo fi = obj.GetType().GetField("m_szSize", BindingFlags.NonPublic | BindingFlags.Instance); //Set the size fi.SetValue(obj, new Size(50, 50)); } //Custom Button Image this.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(new TabPrimitive(TabPrimitiveType.NextPage, Properties.Resources.loadscreen, Color.FromArgb(64,64,64), true, 1, "TabPrimitive0", "")); this.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(new TabPrimitive(TabPrimitiveType.PreviousTab, Properties.Resources.dp4, Color.FromArgb(64, 64, 64), true, 1, "TabPrimitive1", "")); this.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(new TabPrimitive(TabPrimitiveType.DropDown, Properties.Resources.dp2, Color.FromArgb(64, 64, 64), true, 1, "TabPrimitive2", "")); this.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(new TabPrimitive(TabPrimitiveType.FirstTab, Properties.Resources.dp3, Color.FromArgb(64, 64, 64), true, 1, "TabPrimitive3", "")); VB ‘Add reflection namespace Imports System.Reflection 'TabControlAdv Item size Me.tabControlAdv1.ItemSize = New Size(Me.tabControlAdv1.ItemSize.Width, 50) 'Set the TabPrimitive Buttons size For Each item As TabPrimitive In Me.tabControlAdv1.TabPrimitivesHost.TabPrimitives Dim obj = item Dim fi As FieldInfo = obj.GetType().GetField("m_szSize", BindingFlags.NonPublic Or BindingFlags.Instance) fi.SetValue(obj, New Size(50, 50)) Next item 'Custom Button Image Me.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(New TabPrimitive (TabPrimitiveType.NextPage, My. Resources.loadscreen, Color.FromArgb(64,64,64), True, 1, "TabPrimitive0", "")) Me.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(New TabPrimitive (TabPrimitiveType.PreviousTab, My. Resources.dp4, Color.FromArgb(64, 64, 64), True, 1, "TabPrimitive1", "")) Me.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(New TabPrimitive (TabPrimitiveType.DropDown, My. Resources.dp2, Color.FromArgb(64, 64, 64), True, 1, "TabPrimitive2", "")) Me.tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(New TabPrimitive (TabPrimitiveType.FirstTab, My. Resources.dp3, Color.FromArgb(64, 64, 64), True, 1, "TabPrimitive3", "")) Screenshot Samples: C#: TabControlAdvExample VB: TabControlAdvExample Reference link: https://help.syncfusion.com/windowsforms/tabcontrol/tab-navigation
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: The following screenshot displays the Tabscroll Button
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) { } } }
