XAML transitions on Windows 8 Ignored

Question

Currently working with Windows 8.1 and XAML Transitions.

I have a grid that translates across my page. Inside the grid I have an image which I want to scale. When I set up the animations using Blend all is well but once deployed the scale animation on the image is never acted upon, it's as if the grid stops forces its children to ignore their transitions.

The same XAML code works as expected on Windows Phone, but not on Windows 8.1.

Here's some example code to illustrate:

<Page.Resources>
    <ResourceDictionary>
        <Storyboard x:Name="MainStoryboard">
            <DoubleAnimationUsingKeyFrames x:Name="PanelOut" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Panel1">
                <EasingDoubleKeyFrame x:Name="PanelOutInitial" KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame x:Name="PanelOutKeyFrame" KeyTime="0:0:3" Value="-648">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuinticEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Name="PanelIn" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Panel2">
                <EasingDoubleKeyFrame x:Name="PanelInInitial" KeyTime="0" Value="648"/>
                <EasingDoubleKeyFrame x:Name="PanelInKeyFrame" KeyTime="0:0:3" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuinticEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Image2">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Image2">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ResourceDictionary>
</Page.Resources>

<Grid x:Name="LayoutRoot" Tapped="LayoutRoot_Tapped" Background="DarkGray">
    <Grid
        x:Name="Panel1"
        Background="{StaticResource StoryBackgroundBrush}"
        RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <CompositeTransform/>
        </Grid.RenderTransform>
        <Grid.CacheMode>
            <BitmapCache></BitmapCache>
        </Grid.CacheMode>
        <Grid>
            <Image x:Name="Image1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Source="/uicontent/images/AttractLoop/imaging3.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Share photos easily." VerticalAlignment="Top" Margin="48,48,0,0" FontSize="68" FontFamily="Segoe UI" Foreground="#FFDA3B01"/>
        </Grid>
    </Grid>
    <Grid
        x:Name="Panel2"
        Background="{StaticResource OneDriveBackgroundBrush}"
        RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <CompositeTransform x:Name="Trans" TranslateY="800"/>
        </Grid.RenderTransform>
        <Grid.CacheMode>
            <BitmapCache></BitmapCache>
        </Grid.CacheMode>
        <Grid>
            <Image x:Name="Image2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Source="/uicontent/images/AttractLoop/imaging1.jpg" Stretch="UniformToFill">
                <Image.RenderTransform>
                        <CompositeTransform/>
                    </Image.RenderTransform>
                </Image>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Tap to begin." VerticalAlignment="Top" Margin="48,48,0,0" FontSize="68" FontFamily="Segoe UI" Foreground="#FFDA3B01"/>
        </Grid>
    </Grid>
</Grid>

Interestingly, when I try to edit the transition in Blend the scale animation slider always snaps back to 0 as if there is a bug.

Any ideas as to why this is happening?

r2d2rigo r2d2rigo · Accepted Answer · 2014-08-14T11:40:29

XAML for WinRT may be very similar to Silverlight, but since Windows Store applications can run in low-end devices, some restrictions have been introduced. In your case, you are trying to animate a child object, and that is considered a dependent animation. By default, WinRT doesn't execute dependent animations, unless you specify EnableDependentAnimation="True" when declaring the animation object.

XAML transitions on Windows 8 Ignored

1 Answers