How to change HyperlinkButton background and foreground color when PointerEntered in UWP

user_1030825 0
Viewed 1168

Here is my sample UWP code in C# and XAML Where i created one hyperlink button in MainPage method and set the style attributes like foreground and background.

Now i want to change the background and foreground colors when PointerEntered event triggered like mouseover, in this case only font size is changing but not the colors

public MainPage(){
    this.InitializeComponent();

    var hLinkButton = new HyperlinkButton();

    hLinkButton.Name = "LearnMoreHyperLink";
    hLinkButton.Content = "Learn More...";

    hLinkButton.Background = new SolidColorBrush(Colors.Red);
    hLinkButton.Foreground = new SolidColorBrush(Colors.White);
    hLinkButton.FontWeight = FontWeights.SemiBold;
    hLinkButton.FontSize = 18.0;

    hLinkButton.PointerEntered += OnPointerEntered;
    LayoutGrid.Children.Add(hLinkButton);
}

private void OnPointerEntered(object sender, PointerRoutedEventArgs e){
    var hLButton = sender as HyperlinkButton;
    hLButton.Background = new SolidColorBrush(Colors.White);
    hLButton.Foreground = new SolidColorBrush(Colors.Red);
    hLButton.FontSize = 30.0;
}

// Only fontsize effecting on mouseover, background and foreground is not working
windows-10-universal uwp-xaml uwp c#
2 Answers

You can override the style template for the HyperlinkButton to achieve this.

To do this you need to right click on your HyperLinkButton > Edit template > Edit a copy. Then add the relevant code to the visual state. In your case the visual state is "PointerOver".

The following code will make the foreground of the HyperLinkButton to Red and the background to white.

  <VisualState x:Name="PointerOver">
      <Storyboard>
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                     Storyboard.TargetProperty="Foreground">
           <DiscreteObjectKeyFrame KeyTime="0" Value="#FFFF0000" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                     Storyboard.TargetProperty="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="#FFFFFFFF" />
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>
   </VisualState>

EDIT

In c# code what you are doing is changing the Background and Foreground color of the HyperLinkButton which is overriding the color for the "Normal" visual state of the control.. While the pointer is above your control, the default control style predefined in the XAML(for "PointerOver" state) is showing the color that it is supposed to,so you can only see the change after the pointer is removed from your control..

Thus, overriding the xaml styling of the control is the correct and the best solution for PointerOver event in my opinion..

Pointer over

Please ask any further questions that you may have regarding this.. I will be happy to give a proper explanation if required.

user_73252170

You should do it this way -

hLinkButton.PointerEntered += hLinkButton_OnPointerEntered;

private void hLinkButton_OnPointerEntered(object sender, PointerRoutedEventArgs e)
{
    var hLButton = sender as HyperlinkButton;
    hLButton.Background = new SolidColorBrush(Colors.White);
    hLButton.Foreground = new SolidColorBrush(Colors.Red);
    hLButton.FontSize = 30.0;
}

further if you want reverse all things back, you should use Pointer hLinkButton_PointerExited Event

Update

Whats is actual problem everything looks fine with your code.

Output with your codes

Output

Further you can declare your hyper link button once like this i am done

public sealed partial class MainPage : Page
{
    HyperlinkButton hLinkButton = new HyperlinkButton();

    public MainPage()
    {
        this.InitializeComponent();

        hLinkButton.Name = "LearnMoreHyperLink";
        hLinkButton.Content = "Learn More...";
        hLinkButton.Background = new SolidColorBrush(Colors.Red);
        hLinkButton.Foreground = new SolidColorBrush(Colors.White);
        hLinkButton.FontWeight = FontWeights.SemiBold;
        hLinkButton.FontSize = 18.0;
        hLinkButton.PointerEntered += OnPointerEntered;
        LayoutGrid.Children.Add(hLinkButton);
    }      

    private void OnPointerEntered(object sender, PointerRoutedEventArgs e)
    {
        hLinkButton.Background = new SolidColorBrush(Colors.White);
        hLinkButton.Foreground = new SolidColorBrush(Colors.Red);
        hLinkButton.FontSize = 30.0;
    }
}
user_67165590
Related