)
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 HorizontalTemplate of SfTabControl?

Platform: UWP |
Control: SfTabControl |
Published Date: November 14, 2016 |
Last Revised Date: January 9, 2020

Horizontal Template of SfTabcontrol can be customized using TabControlHorizontalTemplate property.    The below sample code explains how to customize TabControlHorizontalTemplate 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="tabControlHorizontalTemplate" 
                              TargetType="syncfusion:SfTabControl">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="TabStripPlacement">
                        <VisualState x:Name="Top">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                 Storyboard.TargetProperty="Style" 
                                 Storyboard.TargetName="PreviousTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                  Value="{StaticResource TabStripButtonStyleRight}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                 Storyboard.TargetProperty="Style" 
                                  Storyboard.TargetName="NextTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                    Value="{StaticResource TabStripButtonStyleLeft}"/>
                                </ObjectAnimationUsingKeyFrames>
 
                                <ObjectAnimationUsingKeyFrames 
                                                    Storyboard.TargetProperty="Style" 
                                  Storyboard.TargetName="PinnedPreviousTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                              Value="{StaticResource TabStripButtonStyleRight}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="Style" 
                                    Storyboard.TargetName="PinnedNextTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                  Value="{StaticResource TabStripButtonStyleLeft}"/>
                                </ObjectAnimationUsingKeyFrames>
 
                                <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetProperty="Height" 
                                Storyboard.TargetName="RowOne">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                              Storyboard.TargetProperty="Height" 
                                Storyboard.TargetName="RowTwo">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                           Storyboard.TargetProperty="(Grid.Row)" 
                                       Storyboard.TargetName="PART_ItemsGrid">
                                   <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                 Storyboard.TargetProperty="(Grid.Row)"
                                  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="Width" 
                                      Storyboard.TargetName="COne">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                   Storyboard.TargetProperty="Width" 
                                   Storyboard.TargetName="CTwo">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                    Storyboard.TargetProperty="Width" 
                                    Storyboard.TargetName="CThree">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(Grid.Column)"
                                Storyboard.TargetName="PART_PinnedItemsGrid">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                             Storyboard.TargetProperty="(Grid.Column)"
                             Storyboard.TargetName="PART_TabHeaderGrid">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                             Storyboard.TargetProperty="(Grid.Column)" 
                            Storyboard.TargetName="CommonButtonBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="4"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                     Storyboard.TargetProperty="Margin" 
                                    Storyboard.TargetName="PART_ScrollViewer">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,15"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                      Storyboard.TargetProperty="Margin" 
                                      Storyboard.TargetName="PART_LeftHeader">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,15"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetProperty="Margin" 
                                        Storyboard.TargetName="PART_RightHeader">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,15"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="Margin" 
                                        Storyboard.TargetName="PART_PinnedItemsGrid">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,15"/>
                                </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames 
                                         Storyboard.TargetProperty="Margin" 
                                        Storyboard.TargetName="CommonButtonBorder">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="0,-15,10,0"/>
                              </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                   Storyboard.TargetProperty="Margin"
                                   Storyboard.TargetName="PART_Seperator">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,15,7"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                    Storyboard.TargetProperty="Style" 
                                    Storyboard.TargetName="TabstripMenuButton">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                    Value="{StaticResource TabStripButtonStyleTop}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
 
                        <VisualState x:Name="Bottom">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
                                      Storyboard.TargetProperty="Style" 
                                     Storyboard.TargetName="PreviousTabButton">
                                  <DiscreteObjectKeyFrame KeyTime="0" 
                                  Value="{StaticResource TabStripButtonStyleRight}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                   Storyboard.TargetProperty="Style"
                                   Storyboard.TargetName="NextTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                     Value="{StaticResource TabStripButtonStyleLeft}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                     Storyboard.TargetProperty="Style"
                                     Storyboard.TargetName="PinnedPreviousTabButton">
                                  <DiscreteObjectKeyFrame KeyTime="0"
                                    Value="{StaticResource TabStripButtonStyleRight}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                         Storyboard.TargetProperty="Style" 
                                      Storyboard.TargetName="PinnedNextTabButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                    Value="{StaticResource TabStripButtonStyleLeft}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetProperty="Height" 
                                        Storyboard.TargetName="RowOne">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                   Storyboard.TargetProperty="Height" 
                                   Storyboard.TargetName="RowTwo">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                   Storyboard.TargetProperty="(Grid.Row)" 
                                   Storyboard.TargetName="PART_ItemsGrid">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                 Storyboard.TargetProperty="(Grid.Row)" 
                                  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="Width" 
                                      Storyboard.TargetName="COne">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                   Storyboard.TargetProperty="Width" 
                                        Storyboard.TargetName="CTwo">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                  Storyboard.TargetProperty="Width"  
                                   Storyboard.TargetName="CThree"
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                  Storyboard.TargetProperty="(Grid.Column)" 
                                  Storyboard.TargetName="PART_LeftHeader">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                  Storyboard.TargetProperty="(Grid.Column)" 
                                  Storyboard.TargetName="PART_PinnedItemsGrid">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                     Storyboard.TargetProperty="(Grid.Column)"
                                     Storyboard.TargetName="PART_TabHeaderGrid">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                    Storyboard.TargetProperty="(Grid.Column)" 
                                      Storyboard.TargetName="CommonButtonBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="4"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                      Storyboard.TargetProperty="Margin" 
                                   Storyboard.TargetName="PART_ScrollViewer">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                      Storyboard.TargetProperty="Margin" 
                                      Storyboard.TargetName="PART_LeftHeader">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                          Storyboard.TargetProperty="Margin" 
                                          Storyboard.TargetName="PART_RightHeader">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="Margin" 
                                          Storyboard.TargetName="PART_PinnedItemsGrid">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                          Storyboard.TargetProperty="Margin" 
                                       Storyboard.TargetName="CommonButtonBorder">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,10,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                          Storyboard.TargetProperty="Margin" 
                                       Storyboard.TargetName="PART_Seperator">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="0,7,15,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
                                       Storyboard.TargetProperty="Style" 
                                      Storyboard.TargetName="TabstripMenuButton">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                  Value="{StaticResource TabStripButtonStyleBottom}"/>
                                </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="PART_Content">
                                    <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames 
                                  Storyboard.TargetProperty="Opacity" 
                                  Storyboard.TargetName="PART_ContentHolder">
                                    <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames 
                                          Storyboard.TargetProperty="Opacity" 
                                        Storyboard.TargetName="PART_TabStripMenuPopup">
                                    <DiscreteDoubleKeyFrame Value="0.5" 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.RowDefinitions>
                            <RowDefinition x:Name="RowOne" Height="Auto"/>
                            <RowDefinition x:Name="RowTwo" Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid x:Name="PART_ItemsGrid" Grid.Row="0"  >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto" x:Name="COne"/>
                                <ColumnDefinition Width="Auto" x:Name="CSeperator"/>
                                <ColumnDefinition Width="*" x:Name="CTwo"/>
                                <ColumnDefinition Width="Auto" x:Name="CThree"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.Column="0" Margin="5 0 15 0" 
                              x:Name="PART_LeftHeader" Content="{TemplateBinding 
                                                LeftHeader}" />
                            <Grid x:Name="PART_PinnedItemsGrid" Grid.Column="1" 
                                   Margin="0,0,15,0" Visibility="Collapsed">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" x:Name="PinnedCOne"/>
                                    <ColumnDefinition Width="Auto" 
                                                  x:Name="PinnedCTwo"/>
                                </Grid.ColumnDefinitions>
                                <ScrollViewer x:Name="PART_PinnedScrollViewer" 
                                              Grid.Column="0" Margin="0,0,7,0"
                                              
                                          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.Column="1" 
                                       x:Name="PinnedCommonButtonBorder" 
                                       Margin="0,7,15,0"  HorizontalAlignment="Right" 
                                       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"  Width="1" Height="40" 
                             VerticalAlignment="Center" Fill="#FF848484" 
                              Grid.Column="2" Visibility="Collapsed"></Rectangle>
                            <Grid Grid.Column="3" x:Name="PART_TabHeaderGrid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                               <ScrollViewer x:Name="PART_ScrollViewer" Grid.Column="0 
                                  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.Column="1" Margin="10 0 15 0"
                                   x:Name="PART_RightHeader" Content="{TemplateBinding
                                                                    RightHeader}" />
                            </Grid>
                            <Border Grid.Column="4" x:Name="CommonButtonBorder" 
                                  Margin="{TemplateBinding Margin}" 
                                  HorizontalAlignment="Right" Visibility="Collapsed">
                                <Grid x:Name="CommonButtonGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <RepeatButton Grid.Column="0" 
                              Style="{StaticResource TabStripButtonStyleLeft}" 
                              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 
                 TabStripButtonStyleRight}" 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="Red" 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 Grid.Row="1" 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>
 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <syncfusion:SfTabControl x:Name="tabcontrol" Margin="0 30 20 0" 
                     ShowTabstripMenu="True" CloseButtonType="Common" >
            <syncfusion:SfTabItem Header="header_1">
                <syncfusion:SfTabItem.Content>
                    <RichTextBlock Margin="10">
                        <Paragraph>
                            <Run FontSize="15">
                                SfTabControl is similar to the diveders in a notebook or the labels in a file cabinet. It can be used to create a tabbed interface in an application. Support to position the tab strip to the left, right, top or bottom of the control. It supports the positioning of the tab strip to the left, right, top or bottom of the control, and can be used to customize the display mode of the close button.It has the option to choose the style of selection of the tab header item.
                            </Run>
                        </Paragraph>
                    </RichTextBlock>
                </syncfusion:SfTabItem.Content>
            </syncfusion:SfTabItem>
            <syncfusion:SfTabItem Header="header_2">
                <syncfusion:SfTabItem.Content>
                    <RichTextBlock Margin="10">
                        <Paragraph>
                            <Run FontSize="15">
                                SfTabControl is similar to the diveders in a notebook or the labels in a file cabinet. It can be used to create a tabbed interface in an application. Support to position the tab strip to the left, right, top or bottom of the control. It supports the positioning of the tab strip to the left, right, top or bottom of the control, and can be used to customize the display mode of the close button.It has the option to choose the style of selection of the tab header item.
                            </Run>
                        </Paragraph>
                    </RichTextBlock>
                </syncfusion:SfTabItem.Content>
            </syncfusion:SfTabItem>
            <syncfusion:SfTabItem Header="header_3">
                <syncfusion:SfTabItem.Content>
                    <RichTextBlock Margin="10">
                        <Paragraph>
                            <Run FontSize="15">
                                SfTabControl is similar to the diveders in a notebook or the labels in a file cabinet. It can be used to create a tabbed interface in an application. Support to position the tab strip to the left, right, top or bottom of the control. It supports the positioning of the tab strip to the left, right, top or bottom of the control, and can be used to customize the display mode of the close button.It has the option to choose the style of selection of the tab header item.
 
                            </Run>
                        </Paragraph>
                    </RichTextBlock>
                </syncfusion:SfTabItem.Content>
            </syncfusion:SfTabItem>
            <syncfusion:SfTabItem Header="header_4">
                <syncfusion:SfTabItem.Content>
                    <RichTextBlock Margin="10">
                        <Paragraph>
                            <Run FontSize="15">
                                SfTabControl is similar to the diveders in a notebook or the labels in a file cabinet. It can be used to create a tabbed interface in an application. Support to position the tab strip to the left, right, top or bottom of the control. It supports the positioning of the tab strip to the left, right, top or bottom of the control, and can be used to customize the display mode of the close button.It has the option to choose the style of selection of the tab header item.
                            </Run>
                        </Paragraph>
                    </RichTextBlock>
                </syncfusion:SfTabItem.Content>
            </syncfusion:SfTabItem>
        </syncfusion:SfTabControl>
    </Grid>

 

 

 

 

 

 

 

Output:

Horizontal vertical template 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