WPF - Animation sur IsSelected

Question

J'ai une ellipse dans un autre contrôle qui obtient son remplissage modifié lorsque le parent est sélectionné.

<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> 

Fonctionne bien. Ce que je n'ai pas réussi à faire cependant est de changer le Fill à la valeur par défaut lorsque le parent n'est plus sélectionné. Comment je fais ça?

Answer 1

si vous cherchez le style tabcontrol juste voir si cela peut vous aider d'une manière ou d'une autre.

<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

Le problème était que j'avais défini l'apparence par défaut de l'Ellipse dans le modèle,

<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> 

Cela a provoqué de telle sorte que lorsqu'un pas TabItem plus a été sélectionné, il n » ai pas t revenir à son apparence par défaut.

Pour résoudre ce problème, je viens de TemplateBind l'Ellipse.Fill à l'arrière-plan du TabItem.

Answer 3

Essayez avec ajoutant que:

      <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> 

à vos Déclencheurs