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
Figure: TabScrollButtons backcolor and forecolor customized.
Figure: TabScrollButtons backcolor and forecolor customized when hovering.
Sample: TabControlExtSample
Didn't find an answer?
Contact Support