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

Question

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

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

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

Answer 1

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

<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 больше не был выбран, он не изменился обратно на свой по умолчаниюпосмотрите.

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

Answer 2

Попробуйте добавить это:

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

на ваши триггеры

Answer 3

, если вы ищете стиль 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>