Question

On a tabcontrol, I have no problem for fade in since the steps are simple. We could put a trigger in the user control and the animation goes on as soon as it becomes visible. But the problem is, when I want to fade out, the control is now hidden and therefore it cannot complete it’s animation.

Here’s the example that I want to achieve: http://www.yoyonetwork.info/YoYoTabTestTestPage.html

And here’s the code:

    <TabControl IsSynchronizedWithCurrentItem="True" VerticalAlignment="Bottom" Name="TabControl1">
        <TabItem Width="70" Name="TabItem1">
            <Grid>
                <my:UserControl1 x:Name="UserControl1"/> <!-- my is the clr-namespace for usercontrols -->
            </Grid>
        </TabItem>
        <TabItem Width="100" Name="TabItem2">
            <Grid>                    
                <my:UserControl2 x:Name="UserControl2"/>
            </Grid>
        </TabItem>
    </TabControl>

In user controls:

    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <Trigger Property="IsVisible" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>

Answer 1

You can’t do that from styles. You have to manually redefine TabControl, check for its SelectionChanged event, run animation from code and wait for its Completed event to change selectedIndex.