CODEWITHSUNDEEP
c#wpf
James
James

Reputation: 87

WPF Color Animation on data change

I am attempting to animate the background colour of a label on the data change of a property. The label is changing colour up to the value of 3. however if the property returns to a value of 1, the animation stays on the previous colour. My XAML is below.

<Style x:Key="Colors" TargetType="Label">
        <Style.Triggers>

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
     Path=DataContext.ColorNo}" Value="1">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                 Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                 To="Red"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
     Path=DataContext.ColorNo}" Value="2">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                 Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                 To="Yellow"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
     Path=DataContext.ColorNo}" Value="3">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                 Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                 To="Green"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>

Label XAML

<Label x:Name="vClock"  Content="{Binding Path=Clock,Mode=OneWay}" FontSize="25" Style="{StaticResource Colors}">                    
            </Label>

Upvotes: 2

Views: 2555

Answers (1)

Daniele Sartori
Daniele Sartori

Reputation: 1703

I think you need to remove the other active storyboard first, but it's is better to proceed declaring your storyboard in the resources:

<Storyboard x:key="Value 1">
    <ColorAnimation 
             Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
             To="Red"/>
</Storyboard>

<Storyboard x:key="Value 2">
    <ColorAnimation 
            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
             To="Yellow"/>
</Storyboard>

<Storyboard x:key="Value 3">
    <ColorAnimation 
             Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
             To="Green"/>
</Storyboard>

then look at the datatrigger

<Style x:Key="Colors" TargetType="Label">
    <Style.Triggers>

        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
 Path=DataContext.ColorNo}" Value="1">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="Value2" />
                <StopStoryboard BeginStoryboardName="Value3" />
                <BeginStoryboard Storyboard="{StaticResource Value1}"
                                     x:Name="Value1" />
            </DataTrigger.EnterActions>
        </DataTrigger>

        ...
    </Style.Triggers>
</Style>

Do the same for all the triggers

Upvotes: 4

Related Questions