Question

I’m a newbie looking at this example from
http://www.codeproject.com/Articles/199014/Page-Transition-Control-for-WPF

it has a lot storyboard objects such as this

<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" To="100" Duration="0:0:.75" AccelerationRatio=".9" />

and a TransformGroup such as this

`<ScaleTransform 
  ScaleX="1" ScaleY="1" 
  CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}" 
    CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" 
/>

<SkewTransform 
  AngleX="0" 
  AngleY="0" 
    CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}" 
    CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" 
/>

<RotateTransform 
  Angle="0" 
    CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}" 
    CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" 
/>
<TranslateTransform X="0" Y="0" />`

Can someone explain how it works to me, this is SO CONFUSING! I’ve spent one whole day reading Xaml and wpf books, but i still don’t get it. When I try understand by simplifying the code, i kept getting errors like this: ‘[Unknown]’ property does not point to a DependencyObject in path ‘(RenderTransform).(0)[1].(1)’

Is WPF really so DIFFICULT!?!?!?

Answer 1

Animations are probably not the best starting point if you’re new to WPF, but I’ll see if I can explain them a bit.

There are two types of “transforms” in WPF, which can be used to modify the appearance of a UI object.

• LayoutTransform modifies the object after WPF has determined how it’s going to be laid out on the screen
• RenderTransform modifies the object after it has been rendered to the screen

Both of these properties contain a collection of transformations to occur for the object: Rotate, Scale, Skew, and Translate (move up/down or left/right)

An Animation is something that changes a property from one value to another value over a specific period of time. For example, you might change the Height property of an object from 50 to 200 over a period of 1 second to make the object visibly grow bigger on the screen.

The code you are looking at is one of these animations.

<DoubleAnimation 
    Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" 
    To="100" Duration="0:0:.75" AccelerationRatio=".9" />

The tag name tells us it’s a DoubleAnimation, meaning it is modifying a property that is of type double.

The TargetProperty tells us it is modifying the 2nd object in the RenderTransform collection (to simplify it a bit, RenderTransform.Children[1])

The Transform expected there is a SkewTransform, and the animation is set to change the AngleX property from whatever it is now, to 100, over a period of 0:0:.75 seconds

I’m not that familiar with the AccelerationRatio property, however I believe it modifies how fast the value should accelerate from the start value to the end value.