Charles Petzold

... on CNN Headline News to remind us that Daylight Saving Time has begun, so of course I had to reproduce it in XAML. You can download or run the TimeChange.xaml file or look at it here:

<!-- =============================================       TimeChange.xaml (c) 2006 by Charles Petzold       ============================================= --> <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="FontSize" Value="48" />
                <Setter Property="Margin" Value="1" />
                <Setter Property="RenderTransformOrigin" Value="0.5 0.8" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform />
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <TextBlock Text="T" Name="L0" />
        <TextBlock Text="I" Name="L1" />
        <TextBlock Text="M" Name="L2" />
        <TextBlock Text="E" Name="L3" />
        <TextBlock Text=" " />
        <TextBlock Text="C" Name="L4" />
        <TextBlock Text="H" Name="L5" />
        <TextBlock Text="A" Name="L6" />
        <TextBlock Text="N" Name="L7" />
        <TextBlock Text="G" Name="L8" />
        <TextBlock Text="E" Name="L9" />
        <StackPanel.Triggers>             <EventTrigger RoutedEvent="StackPanel.Loaded">                 <BeginStoryboard>                     <Storyboard TargetProperty="RenderTransform.Angle"
                                SpeedRatio="2.5" >

                        <ParallelTimeline Duration="0:0:15"
                                          RepeatBehavior="Forever">

                            <DoubleAnimation Storyboard.TargetName="L0" 
                                             To="360" BeginTime="0:0:0" />
                            <DoubleAnimation Storyboard.TargetName="L1" 
                                             To="360" BeginTime="0:0:1" />
                            <DoubleAnimation Storyboard.TargetName="L2" 
                                             To="360" BeginTime="0:0:2" />
                            <DoubleAnimation Storyboard.TargetName="L3" 
                                             To="360" BeginTime="0:0:3" />
                            <DoubleAnimation Storyboard.TargetName="L4" 
                                             To="360" BeginTime="0:0:4" />
                            <DoubleAnimation Storyboard.TargetName="L5" 
                                             To="360" BeginTime="0:0:5" />
                            <DoubleAnimation Storyboard.TargetName="L6" 
                                             To="360" BeginTime="0:0:6" />
                            <DoubleAnimation Storyboard.TargetName="L7" 
                                             To="360" BeginTime="0:0:7" />
                            <DoubleAnimation Storyboard.TargetName="L8" 
                                             To="360" BeginTime="0:0:8" />
                            <DoubleAnimation Storyboard.TargetName="L9" 
                                             To="360" BeginTime="0:0:9" />
                        </ParallelTimeline>
                    </Storyboard>                 </BeginStoryboard>             </EventTrigger>
        </StackPanel.Triggers>
    </StackPanel>
</Page>

A few notes:

The RenderTransformOrigin vertical coordinate of 0.8 was selected empirically so the rotation occurs in the horizontal center of the letter approximately on the baseline.

Each DoubleAnimation contains a minimum amount of information to make this work. By default, the To value is picked up from the default value of the property being animated (which is 0). The default Duration is 1 second. I wanted to code everything for a duration of 1 second per letter and then adjust the overall speed later using SpeedRatio.

I wanted the letters to spin in succession, followed by a pause and then repeat the whole thing. However, when I set both a SpeedRatio and a Duration on the Storyboard, funny things started happening. That's why I introduced a ParallelTimeline element with the Duration and RepeatBehavior, and then put the SpeedRatio of 2.5 in the Storyboard. In real time, the whole thing runs 6 seconds: 4 seconds of spinning letters and a 2 second pause.