Category / Section
How to customize the VerticalTemplate of SfTabControl?
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:
