I have created a custom control, its purpose is to display current status of a task, the part of changing the selection without the animation is done, what I am struggling with, is the animation. It does not play the whole sequence which should be: State 1: Minimize => Change Foreground to gray | => State 2: Change Foreground to white => Highlight. Instead, it seems to skip a Storyboard.
The problem lies in the code below and I don't know what I am doing wrong here, I am pretty novice to XAML, and I'm sure I have done something stupid:
<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>
The problem was, when trying to animate one storyboard, the last one didn't stop, therefore the storyboard which was supposed to start did not
For another storyboard to animate we need to stop last animated storyboard, to do this, we have to set a name for all of the <BeginStoryboard>, after this when we start a new storyboard (<BeginStoryboard>) we should call other <StopStoryboard BeginStoryboardName="Storyboard1"/> to stop before the <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>