Category / Section
How to apply brushes for mouse over background and foreground in TabControl?
42 mins read
To apply brushes for mouse over background and foreground in SfTabControl, customize the template of SfTabControl. When mouse hover the Selected Header of Tabcontrol, default background and foreground color will be blue and black respectively. Here different pointerover background and foreground colors are applied. The same has been demonstrated in the following code example:
<Page
x:Class="Mouse_hover.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Mouse_hover"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<SolidColorBrush x:Key="AccentBrush">#FF45ADEB</SolidColorBrush>
<SolidColorBrush x:Key="selectedForeground">#FFFFFFFF</SolidColorBrush>
<SolidColorBrush x:Key="UnselectedBackground">#FF636363</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverBackground1">Green</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverForeground1">Yellow</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverBackground2">Red</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverForeground2">White</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverBackground3">Violet</SolidColorBrush>
<SolidColorBrush x:Key="PointerOverForeground3">Pink</SolidColorBrush>
<SolidColorBrush x:Key="CommonPointerOverBackground">#FFD3D3D3
</SolidColorBrush>
<Style x:Key="PinnableButtonStyle" TargetType="RepeatButton">
<Setter Property="Margin" Value="7 7 7 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid x:Name="ButtonBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Common">
<VisualState x:Name="Normal"/>
<VisualState x:Name="NormalPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="HeaderTextPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="Pin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CompleteHeaderPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="Pin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
PointerOverBackground}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource
ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Pin">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PinnableStates">
<VisualState x:Name="Pinned">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
TransformGroup.Children)[0].(RotateTransform.Angle)"
Storyboard.TargetName="Pin">
<EasingDoubleKeyFrame KeyTime="0" Value="134"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnPinned"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="backgroundellipse" Fill="{TemplateBinding
Background}" Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="2" Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding
VerticalContentAlignment}">
<Path x:Name="Pin" Data="F1M1525.83,266.24L1529.12,256.359 1539,246.478 1542.29,249.771 1552.17,246.478 1542.29,236.598 1545.59,233.304 1559.25,212.907 1539,226.718 1535.71,230.008 1540.88,235.189 1525.83,220.131 1522.53,230.008 1525.83,233.304 1515.95,243.181 1506.06,246.478 1525.83,266.24z"
Stretch="Uniform" Fill="White" HorizontalAlignment="Center"
VerticalAlignment="Center" Width="13.5" Height="11.5"
Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="44" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CloseButtonStyle" TargetType="RepeatButton">
<Setter Property="Margin" Value="7 7 7 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid x:Name="ButtonBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="HeadertextPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CompleteHeaderPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="ButtonContent">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource UnselectedBackground}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PointerOverBackground}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="backgroundellipse">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ButtonContent">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="backgroundellipse"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="2" Height="{TemplateBinding
Height}" Width="{TemplateBinding Width}"/>
<ContentPresenter
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}">
<Path x:Name="ButtonContent" Data="M51.527958,0L64,12.4741 44.47221,32.001027 64,51.52871 51.528,64.000001 32.000016,44.472668 12.471823,64.000001 0.0010004044,51.528802 19.528015,32.001088 0,12.473726 12.472,0.0010004044 31.999884,19.528773z"
Fill="White" Width="17" Height="17" Stretch="Uniform"
Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="syncfusion:SfTabItem" x:Key="TabItemStyle1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:SfTabItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="NormalState"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedForeground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedBackground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding Foreground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
PointerOverForeground1}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PointerOverBackground1}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NormalPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{Binding Background,
RelativeSource={RelativeSource TemplatedParent}}"
x:Name="PART_SelectedBorder"
Visibility="Collapsed" />
<Border BorderThickness="{TemplateBinding
BorderThickness}"
BorderBrush="{TemplateBinding
BorderBrush}" Width="{TemplateBinding
Width}"
Height="{TemplateBinding Height}"
x:Name="PART_Border">
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Transparent">
<ContentPresenter Margin="{TemplateBinding
Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding
HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding
HeaderTemplateSelector}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}"
x:Name="ContentPresenter"/>
</Border>
<RepeatButton Style="{StaticResource
PinnableButtonStyle}" Margin="0 7.5 7.5 0"
Background="{StaticResource
UnselectedBackground}" Foreground="{Binding
Foreground, RelativeSource={RelativeSource
TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="1"
Height="25" Width="25" x:Name="PinnableButton"
Visibility="Collapsed"></RepeatButton>
<RepeatButton Style="{StaticResource
CloseButtonStyle}" Margin="0 7.5 0 0"
Background="{StaticResource
UnselectedBackground}" Foreground="{Binding
Foreground, RelativeSource={RelativeSource
TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="2"
Height="25"Width="25" x:Name="ClosableButton"
Visibility="Collapsed">
</RepeatButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="syncfusion:SfTabItem" x:Key="TabItemStyle2">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:SfTabItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="NormalState"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedForeground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedBackground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding Foreground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
PointerOverForeground2}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
PointerOverBackground2}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NormalPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{Binding Background,
RelativeSource={RelativeSource
TemplatedParent}}"
x:Name="PART_SelectedBorder"
Visibility="Collapsed" />
<Border BorderThickness="{TemplateBinding
BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
x:Name="PART_Border">
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Transparent">
<ContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding
HeaderTemplateSelector}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}"
x:Name="ContentPresenter"/>
</Border>
<RepeatButton Style="{StaticResource
PinnableButtonStyle}" Margin="0 7.5 7.5 0"
Background="{StaticResource UnselectedBackground}"
Foreground="{Binding Foreground,
RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="1" Height="25"
Width="25" x:Name="PinnableButton"
Visibility="Collapsed"></RepeatButton>
<RepeatButton Style="{StaticResource
CloseButtonStyle}" Margin="0 7.5 0 0"
Background="{StaticResource
UnselectedBackground}" Foreground="{Binding
Foreground, RelativeSource={RelativeSource
TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="2"
Height="25" Width="25"
x:Name="ClosableButton"
Visibility="Collapsed">
</RepeatButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="syncfusion:SfTabItem" x:Key="TabItemStyle3">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:SfTabItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="NormalState"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedForeground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource selectedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding SelectedBackground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PinnableButton">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{Binding Foreground,
RelativeSource={RelativeSource
TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
PointerOverForeground3}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
PointerOverBackground3}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="PART_Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NormalPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PART_SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{Binding Background,
RelativeSource={RelativeSource
TemplatedParent}}" x:Name="PART_SelectedBorder"
Visibility="Collapsed" />
<Border BorderThickness="{TemplateBinding
BorderThickness}" BorderBrush="{TemplateBinding
BorderBrush}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
x:Name="PART_Border">
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Transparent">
<ContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding
HeaderTemplateSelector}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}"
x:Name="ContentPresenter"/>
</Border>
<RepeatButton Style="{StaticResource
PinnableButtonStyle}" Margin="0 7.5 7.5 0"
Background="{StaticResource
UnselectedBackground}" Foreground="{Binding
Foreground, RelativeSource={RelativeSource
TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="1"
Height="25" Width="25"
x:Name="PinnableButton"
Visibility="Collapsed"></RepeatButton>
<RepeatButton Style="{StaticResource
CloseButtonStyle}" Margin="0 7.5 0 0"
Background="{StaticResource UnselectedBackground}"
Foreground="{Binding Foreground,
RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding
HorizontalAlignment}"
VerticalAlignment="{TemplateBinding
VerticalAlignment}" Grid.Column="2" Height="25"
Width="25" x:Name="ClosableButton"
Visibility="Collapsed"></RepeatButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<syncfusion:SfTabControl x:Name="tabControl" SelectionStyle="{Binding
ElementName=selectionstyle,Path=SelectedItem}">
<syncfusion:SfTabItem Header="Item 1" Style="{StaticResource TabItemStyle1}"/>
<syncfusion:SfTabItem Header="Item 2" Style="{StaticResource TabItemStyle2}"/>
<syncfusion:SfTabItem Header="Item 3" Style="{StaticResource TabItemStyle3}"/>
</syncfusion:SfTabControl>
<StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0 100 0 0">
<TextBlock Text="SelectionStyle" FontSize="16"/>
<ComboBox Margin="7 0 0 0" x:Name="selectionstyle" VerticalAlignment="Top"
Height="30" Width="150" Loaded="ComboBox_Loaded_1"/>
</StackPanel>
</Grid>
</Page>
private void ComboBox_Loaded_1(object sender, RoutedEventArgs e)
{
(sender as ComboBox).ItemsSource =
Enum.GetValues(typeof(Syncfusion.UI.Xaml.Controls.Navigation.
SelectionStyle));
(sender as ComboBox).SelectedIndex = 0;
}
Output:
