How to access ToggleButton content in a storyboard animation - windows-phone-7

Question

I have a toggle button in UI and would like to perform some action when it is clicked.
xaml for this button:
<ToggleButton x:Name="markToggle" Click="markToggle_Click" Style="{StaticResource StyleMarkToggle}" >
<ToggleButton.Content>
<StackPanel x:Name="markToggle_Button" Orientation="Horizontal">
<Image x:Name="Icon" Source="{Binding MarkToggleIcon}" Stretch="None" />
<TextBlock x:Name="Counter" TextWrapping="Wrap" Text="{Binding ButtonText}" Margin="6,0,0,0" />
</StackPanel>
</ToggleButton.Content>
</ToggleButton>
When this toggleButton is clicked, I want to change the Foreground color of textblock (name: Counter).
How do I access this textbox element from Storyboard.Target (or TargetName)?
Here is the xaml code for 'StyleMarkToggle' style.
(Only visual state 'checked' is shown in the below code.)
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetName="{Binding ElementName=Counter}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
It shows this runtime error:
MS.Internal.WrappedException: Cannot resolve TargetName System.Windows.Controls.TextBlock. ---> System.InvalidOperationException: Cannot resolve TargetName System.Windows.Controls.TextBlock.
at MS.Internal.XcpImports.VisualStateManager_GoToStateInternal(Control reference, FrameworkElement root, VisualStateGroup group, VisualState state, Boolean useTransitions, Boolean& refreshInheritanceContext)
at System.Windows.VisualStateManager.RetryGoToStateAfterRefreshingInheritanceContext(Control control, FrameworkElement templateRoot, VisualStateGroup group, VisualState state, Boolean useTransitions)
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
at System.Windows.Controls.Primitives.ToggleButton.ChangeVisualState(Boolean useTransitions)
at System.Windows.Controls.Primitives.ToggleButton.OnApplyTemplate()
at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)

Answer 1

Instead of using a Storyboard, you could just bind the Foreground property of the TextBlock element to the IsChecked property of the ToggleButton element and use a Converter to convert from bool to SolidColorBrush.
Here is the modified XAML:
<ToggleButton x:Name="markToggle" Click="markToggle_Click" Style="{StaticResource StyleMarkToggle}" >
<ToggleButton.Content>
<StackPanel x:Name="markToggle_Button" Orientation="Horizontal">
<Image x:Name="Icon" Source="{Binding MarkToggleIcon}" Stretch="None" />
<TextBlock Foreground="{Binding ElementName=markToggle, Path=IsChecked, Converter={StaticResource BoolToColorConverter}}" x:Name="Counter" TextWrapping="Wrap" Text="{Binding ButtonText}" Margin="6,0,0,0" />
</StackPanel>
</ToggleButton.Content>
</ToggleButton>
And the code for the converter:
public class BoolToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if ((bool)value)
return new SolidColorBrush(Colors.White);
else
return new SolidColorBrush(Colors.Black);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}