故事板动画没有动画
Storyboard animation does not animate
我创建了一个自定义控件,它的目的是显示任务的当前状态,在没有动画的情况下更改选择的部分已经完成,我正在努力的是动画。它不播放应该是的整个序列:状态 1:最小化 => 将前景更改为灰色 | => 状态 2:将前景更改为白色 => 突出显示。相反,它似乎跳过了故事板。
问题出在下面的代码中,我不知道我在这里做错了什么,我是XAML的新手,我确定我做了一些愚蠢的事情:
<UserControl.Template>
<ControlTemplate>
<Border Background="#252E3B">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="State 1" Grid.Row="0"
VerticalAlignment="Center"/>
<TextBlock x:Name="text2" Text="State 2" Grid.Row="1"
VerticalAlignment="Center"/>
</Grid>
</Border>
<!-- Triggers: here lies the problem -->
<ControlTemplate.Triggers>
<!-- State 1 -->
<!-- State 1 Selected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 1 Unselected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 -->
<!-- State 2 Selected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 Unselected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Template>
问题
问题是,当尝试为一个故事板制作动画时,最后一个故事板没有停止,因此应该开始的故事板没有
解决方案
为了让另一个故事板动画化,我们需要停止上一个动画故事板,为此,我们必须为所有 <BeginStoryboard>
设置一个名称,之后我们开始一个新的故事板(<BeginStoryboard>
) 我们应该调用其他 <StopStoryboard BeginStoryboardName="Storyboard1"/>
在 <BeginStoryboard x:Name="Storyboard2">
之前停止
代码
<!-- State 1 -->
<!-- State 1 Selected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardUnselected1"/>
<BeginStoryboard x:Name="StoryboardSelected1">
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 1 Unselected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardSelected1"/>
<BeginStoryboard x:Name="StoryboardUnselected1">
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 -->
<!-- State 2 Selected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardUnselected2"/>
<BeginStoryboard x:Name="StoryboardSelected2">
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 Unselected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardSelected2"/>
<BeginStoryboard x:Name="StoryboardUnselected2">
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
我创建了一个自定义控件,它的目的是显示任务的当前状态,在没有动画的情况下更改选择的部分已经完成,我正在努力的是动画。它不播放应该是的整个序列:状态 1:最小化 => 将前景更改为灰色 | => 状态 2:将前景更改为白色 => 突出显示。相反,它似乎跳过了故事板。
问题出在下面的代码中,我不知道我在这里做错了什么,我是XAML的新手,我确定我做了一些愚蠢的事情:
<UserControl.Template>
<ControlTemplate>
<Border Background="#252E3B">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="State 1" Grid.Row="0"
VerticalAlignment="Center"/>
<TextBlock x:Name="text2" Text="State 2" Grid.Row="1"
VerticalAlignment="Center"/>
</Grid>
</Border>
<!-- Triggers: here lies the problem -->
<ControlTemplate.Triggers>
<!-- State 1 -->
<!-- State 1 Selected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 1 Unselected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 -->
<!-- State 2 Selected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 Unselected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Template>
问题
问题是,当尝试为一个故事板制作动画时,最后一个故事板没有停止,因此应该开始的故事板没有
解决方案
为了让另一个故事板动画化,我们需要停止上一个动画故事板,为此,我们必须为所有 <BeginStoryboard>
设置一个名称,之后我们开始一个新的故事板(<BeginStoryboard>
) 我们应该调用其他 <StopStoryboard BeginStoryboardName="Storyboard1"/>
在 <BeginStoryboard x:Name="Storyboard2">
代码
<!-- State 1 -->
<!-- State 1 Selected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardUnselected1"/>
<BeginStoryboard x:Name="StoryboardSelected1">
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 1 Unselected -->
<DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardSelected1"/>
<BeginStoryboard x:Name="StoryboardUnselected1">
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text1"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text1"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 -->
<!-- State 2 Selected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardUnselected2"/>
<BeginStoryboard x:Name="StoryboardSelected2">
<Storyboard>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="White"
Duration="0:0:0.2"/>
<!-- Make font bigger -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="15"
To="30"
BeginTime="0:0:0.3"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<!-- State 2 Unselected -->
<DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardSelected2"/>
<BeginStoryboard x:Name="StoryboardUnselected2">
<Storyboard>
<!-- Make font smaller -->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="text2"
From="30"
To="15"
Duration="0:0:0.5"/>
<!-- Change Font Color -->
<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
Storyboard.TargetName="text2"
To="Gray"
BeginTime="0:0:0.6"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>