Question

I’ve been headdesking over this for quite some time. Can someone please explain to me, using Expression Blend, how to edit/override the default FocusVisualStyle for a text box? Currently all of my text boxes have that blue accent when they’re selected, and this doesn’t match my current application’s theme, but I just can’t figure out how to override this. I think I’ve set the Border brush in about 10 different places in various templates, events, and properties, and it just won’t override.

Edit: Buttons do this, as well, and it looks even more ugly. I’d like a solution that incorporates all controls that behave like this.

A set of directions for Blend would be preferable to just pasting XAML, but at this point I can’t get picky.

Answer 1

The behavior you’re seeing is actually part of the ListBoxChrome element that exists within TextBox’s default control template. You could easily swap this out with a simpler template that uses the BorderBrush property, which is what Silverlight’s TextBox does.

<ControlTemplate TargetType="{x:Type TextBox}">
    <Border x:Name="Bd" 
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="2">
        <ScrollViewer x:Name="PART_ContentHost" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>