Clever Geek Handbook

XAML transitions on Windows 8 are ignored

Currently working with Windows 8.1 and XAML transitions.

I have a grid that translates my page. Inside the grid, I have an image that I want to scale. When I tweak the animation with Blend everything is fine, but the once unrolled zoom animation on the image never fires, as if the grid stops making its children ignore their transitions.

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

Here's some sample 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 change the transition in Blend, the scale animation slider always snaps to 0 as if there was an error.

Any ideas as to why this is happening?

+3


source to share


1 answer


XAML for WinRT can be very similar to Silverlight, but because Windows Store apps can run on low-end devices, there are some restrictions . In your case, you are trying to animate a child object and this is considered dependent animation . By default, WinRT does not perform dependent animations unless you specify EnableDependentAnimation="True"

an animation when declaring an object.



+2


source






More articles:


All Articles