WPF textbox style throwing InvalidOperationException - wpf

Question

The following style causes the exception "'ContentElement' name cannot be found in the name scope of 'System.Windows.Controls.Grid'" when the textbox it's applied to goes into the disabled state. I've added comments at the spot of the foul. Any idea how I can correct this and not just comment it out?
<Style x:Key="ThemedTextBox" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="-1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="ReadOnly"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Disabled"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<!--DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledState" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<!--************** This is where the problem is **************-->
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF808080"/>
</ColorAnimationUsingKeyFrames-->
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard/>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard/>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="0,0,0,0" x:Name="NormalState">
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_TextBoxBackgroundGradient}">
</Rectangle>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_TextBoxStroke}">
</Rectangle>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Height="Auto" Fill="{StaticResource GlossyBlack_TextBoxHighlightGradient}"/>
</Grid>
<Grid Margin="0,0,0,0" x:Name="MouseOverState" Opacity="0">
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_TextBoxBackgroundGradient}"/>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_TextBoxStroke}"/>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Height="Auto" Fill="{StaticResource GlossyBlack_TextBoxMouseOverHighlight}"/>
</Grid>
<Grid Margin="0,0,0,0" x:Name="DisabledState" Opacity="0">
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Fill="{StaticResource GlossyBlack_TextBoxDisabledBackground}"/>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="0" RadiusY="0" Stroke="{StaticResource GlossyBlack_TextBoxStroke}"/>
</Grid>
<ScrollViewer BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" Margin="4,4,4,4" x:Name="PART_ContentHost" BorderBrush="{x:Null}" Foreground="#FFFFFFFF"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

I don't think you need to specify target at all, remove it and things should start to work
Storyboard.TargetName="ContentElement"
it looks like a simple copy/paste mistake. But just in case, you shouldn't have to specify target on your own style trigger (only if it's in the template trigger and you are manipulating various elements in the template, or the animation is declared outside of your style, and you have to reference an element...

Answer 2

I assume the intention of providing a ColorAnimationUsingKeyFrames was to do some color animation when the box changes from being enabled to being disabled.
However, your DoubleAnimationUsingKeyFrames, which controls the opacity of the background grids already pretty much does that job so I don't think you need to include the ColorAnimationUsingKeyFrames.
As others have said, your immediate problem is exactly what the error message says: the ControlTemplate does not have an element called "ContentElement" in it. Your best bet will be just to remove the whole of the ColorAnimationUsingKeyFrames I think.

Answer 3

Is the name of your TextBox "ContentElement", if not, it should be.
If you look at the example in the documentation...
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.targetname.aspx
...then you will see that the Storyboard.TargetName must be given the name of a valid item in your XAML.