Articles in this section

How to customize the appearance of TabScrollButton in TabControlExt control?

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)
Access denied
Access denied