Remove default mouseover/focus effect on textboxes

Question

I have created a kind of custom TextBox in Expression Blend. I have changed the fill of the background and border to a gradient, and added in a Shadow Effect.

I've noticed that when I mouseover or focus my TextBox, some default behavior/(style?) of WPF takes over and my border is changed.

I was wondering if there was anyway to prevent or stop WPF from changing my TextBoxes style when I focus or mouseover it. Is this possible?

Solution 1

Does you custom style set the OverridesDefaultStyle property to true? I believe this should prevent default values being drawn from the default style.

If so, and this isn't working (or you want to use your own border), all I can think is that you will need to override the default styling mechanism for the event of the appropriate property changing using a Trigger in your Style / ControlTemplate:

<Style x:Key="Triggers" TargetType="TextBox">
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="true">
        <Setter Property = "BorderBrush" Value="{Binding ToYourBorder}"/>
    </Trigger>
  </Style.Triggers>
</Style>

Solution 2

The easier solution is just set texbox border thickness to 0, then wrap texbox to your own border:

<Border BorderBrush="LightGray" BorderThickness="1">
   <TextBox Text="{Binding OutlinePlain, Mode=TwoWay, NotifyOnTargetUpdated=True}"
                         BorderThickness="0"                                
   </TextBox>
</Border>

Solution 3

You should use a new template:

<Style TargetType="{x:Type TextBox}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  <Setter Property="AllowDrop" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBoxBase}">
        <Border 
          Name="Border"
          CornerRadius="2" 
          Padding="2"
          Background="#FFFFFF"
          BorderBrush="#888888"
          BorderThickness="1" >
          <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="#EEEEEE"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="#EEEEEE"/>
            <Setter Property="Foreground" Value="#888888"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

I removed the trigger IsMouseOver

look here for more information: TextBox Styles and Templates

Comments

[mattsven]

How would I create a binding to my border?

[Grant Thomas]

Firstly, have you checked that your style uses <Setter Property="OverridesDefaultStyle" Value="True"/> or not? If so, do you have your background defined as a StaticResource?

[mattsven]

Yes, OverridesDefaultStyle is set to true. As for background, no, it is set to DynamicResource - <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>. Changing it makes no difference.

[Grant Thomas]

@NeXXeuS: My apologies, 'background' was a typo, I meant your border. Is your border set in the same way? If it is then copy the way that is referenced into the trigger setter.

[mattsven]

That didn't work, but interesting discovery - removing <Microsoft_Windows_Themes:ListBoxChrome>'s RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" snippet got the behavior I wanted. Is what I did bad, though?

[Grant Thomas]

@NeXXeus: I can't say whether what you did is bad, or not - it would seem that what you removed pertains to a ListBox, so you may now notice other styles are 'missing' - see how it goes.

[Just code]

OverridesDefaultStyle very important to include