Technique SL21:Replacing A Silverlight Timed Animation With a Nonanimated Element

Example 1: Stopping an animation that is scrolling text, replacing the animation with a full text alternative

This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML.

<UserControl x:Class="StopAnimation.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <UserControl.Resources>
       <ImageBrush x:Key="Stars" ImageSource="/stars.jpg" Stretch="Fill"/>
       <Storyboard x:Key="crawl">
           <DoubleAnimation From="700" To="-100" Duration="0:0:20"
             Storyboard.TargetName="crawltext" Storyboard.TargetProperty="(Canvas.Top)"/> 
       </Storyboard>
       <sys:String x:Key="crawlText">
           Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, 
           have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed 
           to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with 
           enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia 
           races home aboard her starship, custodian of the stolen plans that can save her people and restore 
           freedom to the galaxy….
       </sys:String>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot"
   Background="{StaticResource Stars}"
   Height="600" Width="800">
       <Button Width="200"
   Click="Button_Click">Stop crawling text, display fixed text</Button>
       <Canvas Name="CrawlPanel" Width="605" Height="595" >
           <Canvas.Projection>
               <PlaneProjection RotationX="-75"/>
           </Canvas.Projection>
           <Canvas.Clip>
               <RectangleGeometry Rect="0 0 600 600"/>
           </Canvas.Clip>
           <TextBlock Text="{StaticResource crawlText}"
   TextWrapping="Wrap" FontSize="20"
   Width="300" Canvas.Left="150" Name="crawltext"
   Foreground="Goldenrod"/>
       </Canvas>
   </StackPanel>
</UserControl>

The following is the C# logic. In this example, the animation starts automatically. When the user activates the control (the Button), the event handler stops the animation, removes the animated element from the visual tree, and replaces it with a fixed text element that presents all text at once. Because it is a TextBox, assistive technologies could identify the newly introduced text element and present it, for example read the text in a screen reader.

       public MainPage()
       {
           InitializeComponent();
           (this.Resources["crawl"] as Storyboard).Begin();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           (this.Resources["crawl"] as Storyboard).Stop();
           LayoutRoot.Children.Remove(CrawlPanel);
           TextBox tb = new TextBox();
           tb.IsReadOnly = true;
           tb.FontSize = 30;
           tb.TextWrapping = TextWrapping.Wrap;
           tb.Text = (string)this.Resources["crawlText"];
           LayoutRoot.Children.Add(tb);
       }

This example is shown in operation in the working example of Stop Text Animation.