Question

I’m applying an EntranceThemeTransition animation to a TextBlock. The TextBlock has a style of PageHeaderTextStyle which has a RenderTransform in it. The issue I’m having is that the RenderTransform applies a Translation effect that doesn’t actually render until after the animation is done playing. So, it looks weird because the animation scrolls the control in, and then suddenly the translation snaps the text in place. Does anyone know why this happens?

Is there a way to play the animation with the translation taken into account?

Transform:

<Setter Property="RenderTransform">
    <Setter.Value>
        <TranslateTransform X="-2" Y="8"/>
    </Setter.Value>
</Setter>

TextBlock:

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}">
    <TextBlock.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </TextBlock.Transitions>
</TextBlock>

Answer 1

I just came up against exactly the same issue. The way to solve it is to nest the TextBlock one level away from the Grid with the transition on it, for example with a second Grid.

What happens is the transition applies a transform to each of its children, but any transform they may have had is replaced temporarily until after the animation completes, resulting in the nasty ‘snap’ when the original transform is applied afterwards.

In the following example, the transition will run, replacing the TextBlock‘s transform, and then after the transition ends the original transform will be applied. You see the ‘snap’:

<Grid Style="{StaticResource LayoutRootStyle}">
    <TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
        Margin="0,0,0,40"/>
</Grid>

In the next example, the transition runs and the transform is applied to the Grid, leaving the TextBlock‘s transform unaffected. No ‘snap’:

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid>
        <TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
            Margin="0,0,0,40"/>
    </Grid>
</Grid>

Hope this helps!