How would I go about changing a TabItem color from it's unselected color to it's selected color with an animation on SelectionChanged, so that both the unselected and selected TabItems change?
Edit: This is how my CustomTemplate looks like. There is no animation happening at all so what have I done wrong?
<Style TargetType="TabItem">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid>
<Border BorderBrush="Transparent" BorderThickness="0" MinWidth="120">
<StackPanel Orientation="Vertical">
<ContentPresenter HorizontalAlignment="Center" ContentSource="Header" />
<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5" Fill="Transparent" />
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Ellipse.Fill" Value="Transparent" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill"
From="Transparent" To="Orange" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="Ellipse.Fill" Value="Orange" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill"
From="Orange" To="Transparent" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>