How do I change the OnMouseHover behavior of an Editor Control in Xamarin.Forms

Question

I am designing an application in Xamarin.Forms and I am using an Editor control like so:

I run this on UWP and when I hover my mouse over the Control, the Background Color is Inverted to Black. see Images Below:

Unfocused

Mouse Over

Focused

As you can see, pretty horrible.

I've got a feeling it may be to do with this ThemeResource Style I can also see that on the WinRT platform (I think the same control is used for UWP) it is definitely applying that style but I don't know enough about Styles to tell It may be to do with this line in particular

Answer 1

Indeed, the problem is where you expected it to be. In your case, the VisualState PointerOver animates the border brush and background's opacity to new values. If you want to keep the background as it is, just remove the part marked in the code below.

I would probably keep the border brush highlight so that the user still sees that the control is focused. However, you can also remove that (actually the whole visual state) if you want to.

<VisualState x:Name="PointerOver">
  <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
    </ObjectAnimationUsingKeyFrames>

    <!-- Remove the following -->
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
    </ObjectAnimationUsingKeyFrames>
    <!-- until here -->

  </Storyboard>
</VisualState>