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