WPF - Animation on IsSelected - wpf

Question

I have an Ellipse inside another control that gets its Fill changed when the parent is selected.
<Style TargetType="TabItem">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid MinWidth="150">
<Border BorderBrush="Transparent" BorderThickness="0">
<StackPanel Orientation="Vertical">
<ContentPresenter HorizontalAlignment="Center" ContentSource="Header" />
<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" />
<GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="FirstGradient" Storyboard.TargetProperty="Color"
From="Transparent" To="#FF9221" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="SecondGradient" Storyboard.TargetProperty="Color"
From="Transparent" To="#FFCFA5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Works fine. What I've not managed to do though is to change the Fill back to default when the parent is no longer selected. How do I do that?

Answer 1

if you are looking for tabcontrol style
just see if this can help you out in some way.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication16.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#00FE3737"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFF2525"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid MinWidth="150">
<Border BorderBrush="Transparent" BorderThickness="0">
<StackPanel Orientation="Vertical">
<ContentPresenter HorizontalAlignment="Center" ContentSource="Header" />
<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" />
<GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<TabControl>
<TabItem Header="First"></TabItem>
<TabItem Header="Second" IsSelected="true"></TabItem>
<TabItem Header="Last"></TabItem>
</TabControl>
</Grid>

Answer 2

The problem was that I had defined the default look of the Ellipse within the template,
<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" />
<GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
This caused so that when a TabItem no longer was selected, it didn't change back to it's default look.
To solve this I just TemplateBind the Ellipse.Fill to the Background of the TabItem.

Answer 3

Try with adding that:
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="FirstGradient" Storyboard.TargetProperty="Color"
To="Transparent" From="#FF9221" Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="SecondGradient" Storyboard.TargetProperty="Color"
To="Transparent" From="#FFCFA5" Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
to your Triggers