Animated Text Transform : TranslateTransform « Graphics « Silverlight






Animated Text Transform

  



<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
    <TextBlock Text="XAML" FontSize="144pt" FontFamily="Arial Black"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               RenderTransformOrigin="0.5 0.5">

        <TextBlock.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="xformScale" />
                <RotateTransform x:Name="xformRotate" />
            </TransformGroup>
        </TextBlock.RenderTransform>

        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="TextBlock.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="xformScale"
                                         Storyboard.TargetProperty="ScaleX"
                                         From="1" To="-1" Duration="0:0:3" 
                                         AutoReverse="True"
                                         RepeatBehavior="Forever" />

                        <DoubleAnimation Storyboard.TargetName="xformRotate"
                                         Storyboard.TargetProperty="Angle"
                                         From="0" To="360" Duration="0:0:5" 
                                         RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
</UserControl>

   
    
  








Related examples in the same category

1.Skew the text using a TranslateTransformSkew the text using a TranslateTransform
2.TranslateTransform X: 50 / Y: 0
3.TranslateTransform X: 0 / Y : 50TranslateTransform X: 0 / Y : 50
4.TranslateTransform X: 50 / Y: 50TranslateTransform X: 50 / Y: 50
5.Rotate then TranslateRotate then Translate
6.Translate then RotateTranslate then Rotate
7.Rendering rectangles with TranslateTransform.Rendering rectangles with TranslateTransform.