2X faster development
The ultimate UWP UI toolkit to boost your development speed.
|
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:
|
2X faster development
The ultimate UWP UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
