locked
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?

    I have also posted this question on StackOverflow as its quite time-sensitive: http://stackoverflow.com/questions/25306059/xaml-transitions-on-windows-8-ignored



    • Edited by James Mundy Thursday, August 14, 2014 11:01 AM
    Thursday, August 14, 2014 10:47 AM

Answers

  • Hi James,

    Seem the question has been solved. http://stackoverflow.com/questions/25306059/xaml-transitions-on-windows-8-ignored.

    Post the solution here for other communities:

    The key is to apply following code:

    EnableDependentAnimation="True"

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Friday, August 15, 2014 9:47 AM
    Moderator