WPF - Анимация на IsSelected

Question

У меня есть эллипс внутри другого элемента управления, который получает свой Fill, измененный при выборе родителя.

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

Работы хорошо. То, что мне не удалось сделать, это изменить значение «Заполнить» до значения по умолчанию, когда родительский элемент больше не выбран. Как мне это сделать?

Answer 1

Если вы ищете стиль tabcontrol , просто посмотрите, поможет ли это вам каким-то образом.

<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

Проблема заключалась в том, что я определил вид по умолчанию Ellipse внутри шаблона,

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

Это вызвало так, что когда TabItem больше не был выбран, он Ждут» t измените его внешний вид по умолчанию.

Чтобы решить эту проблему, я просто создаю шаблон на панели Ellipse.Fill на фоне TabItem.

Answer 3

Попробуйте с добавлением, что:

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

своим Триггеры