WPF - Animation on IsSelected

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" />
                       开发者_JAVA技巧         <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?

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>

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.

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