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>

工作正常。但我没能做到的是，当不再选择父级时，将“填充”更改回默认值。我该怎么做？

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 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 时，它不会变回默认外观。

为了解决这个问题，我只是将 Ellipse.Fill TemplateBind 到 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>

到你的触发器