Why isn't TextBox.Text in WPF animatable?
- by cplotts
Ok, I have just run into something that is really catching me off-guard.
I was helping a fellow developer with a couple of unrelated questions and in his project he was animating text into some TextBlock(s). So, I went back to my desk and recreated the project (in order to answer his questions), but I accidentally used TextBox instead of TextBlock. My text wasn't animating at all! (A lot of help, I was!)
Eventually, I figured out that his xaml was using TextBlock and mine was using TextBox. What is interesting, is that Blend wasn't creating key frames when I was using TextBox. So, I got it to work in Blend using TextBlock(s) and then modified the xaml by hand, converting the TextBlock(s) into TextBox(es). When I ran the project, I got the following error:
InvalidOperationException: '(0)' Storyboard.TargetProperty path contains nonanimatable property 'Text'.
Well, it seems as if Blend was smart enough to know that ... and not generate the key frames in the animation (it would just modify the value directly on the TextBox). +1 for Blend.
So, the question became: why isn't TextBox.Text animatable? The usual answer is that the particular property you are animating isn't a DependencyProperty. But, this isn't the case, TextBox.Text is a DependencyProperty.
So, now I am bewildered! Why can't you animate TextBox.Text?
Let me include some xaml to illustrate the problem. The following xaml works ... but uses TextBlock(s).
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TextBoxTextQuestion.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640"
Height="480"
>
<Window.Resources>
<Storyboard x:Key="animateTextStoryboard">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="textControl">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="Goodbye"/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource animateTextStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="textControl" Text="Hello" FontFamily="Calibri" FontSize="32"/>
<TextBlock Text="World!" Margin="0,25,0,0" FontFamily="Calibri" FontSize="32"/>
</StackPanel>
</Grid>
</Window>
The following xaml does not work and uses TextBox.Text:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TextBoxTextQuestion.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640"
Height="480"
>
<Window.Resources>
<Storyboard x:Key="animateTextStoryboard">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBox.Text)" Storyboard.TargetName="textControl">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="Goodbye"/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource animateTextStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox x:Name="textControl" Text="Hello" FontFamily="Calibri" FontSize="32"/>
<TextBox Text="World!" Margin="0,25,0,0" FontFamily="Calibri" FontSize="32"/>
</StackPanel>
</Grid>
</Window>
