)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the VerticalTemplate of SfTabControl?

Platform: UWP |
Control: SfTabControl |
Published Date: November 25, 2016 |
Last Revised Date: June 23, 2019

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

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon