Silverlight Styling makes caret disappear? - silverlight-4.0

Question

I have to make a dark silverlight UI. It is a pain, all controls are blackish and texts are white. Also I wanted to change the caret color in my TextBoxes. For reasons I don't wish to discuss, I made a Style for TextBoxes (named is BaseTextBoxStyle) and I made an implicit Style for them too, and that is based on the previously mentioned BaseTextBoxStyle. I edited all Styles and Templtes with Blend, using the "Edit a Copy" command, and I dind't change anything in the Templates but the colors and brushes.
Now my TextBoxes play a funny a game with me. They make the caret disappear. I've tried to recognize a pattern in these disappearances, but the only thing I know for sure, is that the first TextBox I click displays the caret ok. But some clicks later the carets disappear from some (or sometimes all) of the TextBoxes. (It does not switches back to black, it does not appear in the box.)
If I leave the CaretBrush alone, this problem doesn't come up. But then it is black, so I can hardly see it. Any ideas what could cause something like this?
Here's the XAML:
<Style x:Key="BaseTextBoxStyle" TargetType="TextBox">
<Setter Property="CaretBrush" Value="{StaticResource SolidHighBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="{StaticResource LinearMain}"/>
<Setter Property="BorderBrush" Value="{StaticResource LinearBase}"/>
<Setter Property="Foreground" Value="{StaticResource SolidStrongBrush}"/>
<Setter Property="SelectionBackground" Value="{StaticResource SolidHigh2Brush}"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF454545" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="MouseOverBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<Border x:Name="MouseOverBorder" BorderBrush="#00CC832B" BorderThickness="1">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
</Border>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Background="#A5F7F7F7" IsHitTestVisible="False" Opacity="0"/>
<Border x:Name="FocusVisualElement" BorderBrush="{StaticResource SolidHigh2Brush}" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Top" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="1,3,0,0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource BaseTextBoxStyle}"/>

Answer 1

As far as I can tell, this is a bug with the TextBox control. According to this question, if you assign the same SolidColorBrush to a CaretBrush and something else (like a Foreground) then your Foreground will blink with the CaretBrush! So it appears that the TextBox is messing with your brush.
The workaround is to make sure each text box has a separate SolidColorBrush instance for the CaretBrush. This is a bit of a pain, but it's the best solution I could find. For example:
<Color x:Key="CaretColor">White</Color>
<TextBox>
<TextBox.CaretBrush>
<SolidColorBrush Color="{StaticResource CaretColor}" />
</TextBox.CaretBrush>
</TextBox>
If you want a more efficient syntax, you can use a markup extension:
public class BrushFactoryExtension : MarkupExtension
{
public BrushFactoryExtension()
{ }
public BrushFactoryExtension(Color color)
{
Color = color;
}
public Color Color { get; set; }
public override object ProvideValue(IServiceProvider serviceProvider)
{
return new SolidColorBrush(Color);
}
}
Then, for each of your text boxes in XAML:
<TextBox CaretBrush="{local:BrushFactory Color={StaticResource CaretColor}" />