Category / Section
How to customize the VerticalTemplate of SfTabControl?
7 mins read
Vertical Template of SfTabcontrol can be customized using TabControlVerticalTemplate property. The below sample code explains how to customize TabControlVerticalTemplate of SfTabcontrol.
Code snippet:
XAML:
<Page.Resources> <Style TargetType="syncfusion:SfTabControl"> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Padding" Value="0,0,0,0"/> <Setter Property="ContentTransitions"> <Setter.Value> <TransitionCollection> <EntranceThemeTransition /> </TransitionCollection> </Setter.Value> </Setter> <Setter Property="TabControlHorizontalTemplate" Value="{StaticResource tabControlHorizontalTemplate}"></Setter> <Setter Property="TabControlVerticalTemplate" Value="{StaticResource tabControlVerticalTemplate}"></Setter> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <syncfusion:SfTabPanel > </syncfusion:SfTabPanel> </ItemsPanelTemplate> </Setter.Value> </Setter> <Setter Property="Template" Value="{StaticResource tabControlHorizontalTemplate}"> </Setter> </Style> <ControlTemplate x:Key="tabControlVerticalTemplate" TargetType="syncfusion:SfTabControl"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="TabStripPlacement"> <VisualState x:Name="Left"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleBottom}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleTop}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleBottom}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleTop}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ColOne"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ColTwo"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="PART_ItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="PART_ContentBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_ItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="ROne"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="RTwo"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="RThree"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_LeftHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_PinnedItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_TabHeaderGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="3"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="4"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_ScrollViewer"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,15,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,15,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_RightHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,15,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_PinnedScrollViewer"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,15,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="50"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedCommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="PinnedCommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="50"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleLeft}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Right"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleBottom}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleTop}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleBottom}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleTop}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ColOne"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ColTwo"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="PART_ItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="PART_ContentBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_ItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="ROne"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="RTwo"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="RThree"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_LeftHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_PinnedItemsGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="PART_TabHeaderGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="3"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="4"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_ScrollViewer"> <DiscreteObjectKeyFrame KeyTime="0" Value="15,0,0,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_RightHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="15,0,0,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftHeader"> <DiscreteObjectKeyFrame KeyTime="0" Value="15,0,0,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_PinnedScrollViewer"> <DiscreteObjectKeyFrame KeyTime="0" Value="15,0,0,7"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="50"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedCommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="PinnedCommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="50"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabStripButtonStyleRight}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="Visibility"> <VisualState x:Name="Visible"/> <VisualState x:Name="Collapsed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonButtonBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="CommonCloseButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="TabStripPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="TabStripUnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="TabStripPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TabstripMenuButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PreviousTabPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PreviousTabUnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PreviousTabPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="NextTabPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="NextTabUnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="NextTabPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="NextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedPreviousTabPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedPreviousTabUnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedPreviousTabPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedPreviousTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedNextTabPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedNextTabUnSelected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource UnselectedBackground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PinnedNextTabPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CommonPointerOverBackground}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PinnedNextTabButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource selectedForeground}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="Common"> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MainGrid"> <DiscreteDoubleKeyFrame Value="0.8" KeyTime="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Normal"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <Grid x:Name="MainGrid"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="ColOne" Width="Auto"/> <ColumnDefinition x:Name="ColTwo" Width="*"/> </Grid.ColumnDefinitions> <Grid x:Name="PART_ItemsGrid" Grid.Column="0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto" x:Name="ROne"/> <RowDefinition Height="Auto" x:Name="RSeperator"/> <RowDefinition Height="*" x:Name="RTwo"/> <RowDefinition Height="Auto" x:Name="RThree"/> </Grid.RowDefinitions> <ContentPresenter Grid.Row="0" x:Name="PART_LeftHeader" Margin="12 7 0 7" Content="{TemplateBinding LeftHeader}" /> <Grid x:Name="PART_PinnedItemsGrid" Grid.Row="1" Visibility="Collapsed"> <Grid.RowDefinitions> <RowDefinition Height="*" x:Name="PinnedCOne"/> <RowDefinition Height="Auto" x:Name="PinnedCTwo"/> </Grid.RowDefinitions> <ScrollViewer x:Name="PART_PinnedScrollViewer" Grid.Column="0" Margin="0,0,0,7" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"> <syncfusion:SfTabPanel x:Name="PinnedPanel" Visibility="Collapsed"/> </ScrollViewer> <Border Grid.Row="1" x:Name="PinnedCommonButtonBorder" Margin="0,0,0,0" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Visibility="Collapsed"> <Grid x:Name="PinnedCommonButtonGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <RepeatButton Grid.Column="0" Style="{StaticResource TabStripButtonStyleLeft}" Background="{StaticResource selectedForeground}" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="20" Width="20" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PinnedPreviousTabButton" Visibility="Collapsed"/> <RepeatButton Grid.Column="1" Style="{StaticResource TabStripButtonStyleRight}" Background="{StaticResource selectedForeground}" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="20" Width="20" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PinnedNextTabButton" Visibility="Collapsed"/> </Grid> </Border> </Grid> <Rectangle x:Name="PART_Seperator" Height="1" VerticalAlignment="Center" Fill="#FF848484" Grid.Row="2" Visibility="Collapsed"></Rectangle> <Grid Grid.Row="3" x:Name="PART_TabHeaderGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ScrollViewer x:Name="PART_ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"> <ItemsPresenter x:Name="PART_ItemsPresenter" /> </ScrollViewer> <ContentPresenter Grid.Row="1" x:Name="PART_RightHeader" Margin="12 7 0 7" Content="{TemplateBinding RightHeader}" /> </Grid> <Border Grid.Row="4" x:Name="CommonButtonBorder" Margin="{TemplateBinding Margin}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Visibility="Collapsed"> <Grid x:Name="CommonButtonGrid" MaxWidth="220"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" MaxWidth="55"/> <ColumnDefinition Width="*" MaxWidth="55"/> <ColumnDefinition Width="*" MaxWidth="55"/> <ColumnDefinition Width="*" MaxWidth="55"/> </Grid.ColumnDefinitions> <RepeatButton Grid.Column="0" Style="{StaticResource TabStripButtonStyleBottom}" Background="{StaticResource selectedForeground}" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="28" Width="28" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PreviousTabButton" Visibility="Collapsed"/> <RepeatButton Grid.Column="1" Style="{StaticResource TabStripButtonStyleTop}" Background="{StaticResource selectedForeground}" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="28" Width="28" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="NextTabButton" Visibility="Collapsed"/> <RepeatButton Style="{TemplateBinding Style}" Background="Yellow" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="28" Width="28" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="TabstripMenuButton" Visibility="Collapsed" Grid.Column="3"/> <RepeatButton Grid.Column="2" Style="{StaticResource CommonCloseButtonStyle}" Background="{StaticResource selectedForeground}" Foreground="{StaticResource UnselectedBackground}" BorderBrush="{StaticResource UnselectedBackground}" Height="28" Width="28" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="CommonCloseButton" Visibility="Collapsed"/> </Grid> </Border> </Grid> <Border x:Name="PART_ContentBorder" Grid.Column="1"> <Grid> <ContentPresenter x:Name="PART_Content" Foreground="{StaticResource UnselectedBackground}" Visibility="{Binding DisableTabItemContentUnload, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource InverseBooleanToVisibilityConverter}}" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <Grid x:Name="PART_ContentHolder" Visibility="{Binding DisableTabItemContentUnload,RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </Border> <!--TabStripMenu--> <Popup x:Name="PART_TabStripMenuPopup"> <Border x:Name="Part_ListBorder" Background="{StaticResource selectedForeground}" BorderThickness="2" BorderBrush="{StaticResource UnselectedBackground}"> <ListView x:Name="Part_ListView" Margin="0 5 0 5" Background="{StaticResource selectedForeground}" ItemContainerStyle="{StaticResource ListViewItemStyle}" ItemTemplate="{Binding TabstripMenuItemTemplate,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}"/> </Border> </Popup> </Grid> </Border> </Grid> </ControlTemplate> </Page.Resources>
Output: