Articles in this section
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:

VerticalTemplate of SfTabControl

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied