Remove default mouseover/focus effect on textboxes

2019-04-04 01:40发布

问题:

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?

回答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>


回答2:

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



回答3:

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>