Articles in this section
Category / Section

How to customize the appearance of TabScrollButton in TabControlExt control?

1 min read

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

 

Screen for TabScroll Button

Figure: TabScrollButtons backcolor and forecolor customized.

 

Screen for TabScroll Button

Figure: TabScrollButtons backcolor and forecolor customized when hovering.

 

Sample:  TabControlExtSample

 

 

 

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