Charles Petzold

AnimatedReflectedText.xaml

This is one of those things that's harder than it looks. The program originated as a non-animated demonstration of reflected text in Chapter 29 of my forthcoming book. The ReflectedText.xaml program demonstrates the technique of using a resource TransformGroup to multiply a font size by the Baseline property of a FontFamily object to determine the CenterY setting on a ScaleTransform that flips text around its baseline.

In the animated version, I wanted ... well, what I wanted I precisely achieved. It's a combination of a RotateTransform and a TranslateTransform. The Angle property of the RotateTransform is animated between 0 and 90 degrees. The CenteryY property is set to the height of the text above the baseline. Without the TranslateTransform, the RotateTransform would rotate the upper-right figure (for example) 90 degrees clockwise centered around the baseline at the left side of the text. The TranslateTransform is necessary to raise the figure up. In order to keep the baseline at the right side of the text in the same vertical position, the Y property of the TranslateTransform must be set to the negative of the sine of the angle of rotation, mulitplied by the width of the text.

That calculation is performed with the first TextBlock element, which is hidden. It contains a TransformGroup with an animated RotateTransform. The M21 property of the resultant Matrix structure is the negative sine of the rotation angle. This is then multiplied by the width of the text.

All the rest is just bindings.