CODEWITHSUNDEEP
wpf
damike
damike

Reputation: 345

Animation does not stop on Trigger Exit

I try to change an animation when the triggers changes - but the old animation doesnt stop:

<TabControl>
    <TabItem Header="Dummy"></TabItem>
    <TabItem>
        <TabItem.Header>
            <Path Margin="20,0" Width="40.3295" Height="32.775" Stretch="Fill"  Data="M 300 100 L 500 400 100 400 Z" Fill="Gold">                    
                <Path.Style>
                    <Style TargetType="Path">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
                                            <ColorAnimation RepeatBehavior="Forever" From="Green" To="Blue" Duration="0:0:1.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard FillBehavior="Stop" Duration="0" />
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="False">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
                                            <ColorAnimation RepeatBehavior="Forever" From="Red" To="Yellow" Duration="0:0:1.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard FillBehavior="Stop" Duration="0" />
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </TabItem.Header>
        <TextBlock>4</TextBlock>
    </TabItem>
</TabControl>

The animation for not-selected Tab keeps running. Does anybody know how to stop that? Thanks :)

Upvotes: 0

Views: 941

Answers (2)

Heena
Heena

Reputation: 8634

Try this

  <TabControl>
        <TabItem Header="Dummy"></TabItem>
        <TabItem>
            <TabItem.Header>
                <Path Margin="20,0" Width="40.3295" Height="32.775" Stretch="Fill"  Data="M 300 100 L 500 400 100 400 Z" Fill="Gold">
                    <Path.Style>
                        <Style TargetType="Path">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="start">
                                            <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
                                                <ColorAnimation RepeatBehavior="Forever" From="Green" To="Blue" Duration="0:0:1.5" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard FillBehavior="Stop" Duration="0" />
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>                                      
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Name="UnselectedStoryboard">
                                            <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
                                                <ColorAnimation RepeatBehavior="Forever" From="Red" To="Yellow" Duration="0:0:1.5" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="UnselectedStoryboard" ></StopStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Path.Style>
                </Path>
            </TabItem.Header>
            <TextBlock>4</TextBlock>
        </TabItem>
    </TabControl>

Upvotes: 0

Maximus
Maximus

Reputation: 3448

To stop you use BeginStoryBoard as as the name indicates it invokes method Begin for Storyboard. In orded to stop use StopStoryBoard.

 <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Name="start">
                                            <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
                                                <ColorAnimation RepeatBehavior="Forever" From="Green" To="Blue" Duration="0:0:1.5" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="start"/>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>

Upvotes: 5

Related Questions