XAML Tutorial - Changing Text Color on Mouse Over

I received a comment on an old Silverlight 1.1 post a while ago asking how to change the foreground of text when the user has moused over it. I could have pasted the solution as a reply in the comment, but I felt it deserved its very own tutorial.

Silverlight is getting pretty close to supporting everything WPF can, so I went ahead and implemented a solution using WPF instead of Silverlight. When the final Silverlight 2 is released, the code should port very easily to the new environment.

Let's start the tutorial with a simple Windows application and a resource we're going to use as our mouse-over color.

This is basically exactly what Visual Studio generates for you when you create a new application. The only exception is that I added a SolidColorBrush as a resource. The next thing we need in this application is some text.

Now we've actually got some text to change when the mouse enters it. You might have noticed I went with a Label instead of a TextBlock. This is because I decided to use a ControlTemplate to control the colors, and TextBlocks don't support ControlTemplates. Let's take a look at this ControlTemplate now.

I put everything inside a style so I could easily apply it to more than one Label. The most important piece here is the property trigger. Whenever IsMouseOver is true, the foreground of my Label will be set to the SolidColorBrush in my Window's resources. When the property is false, it will revert back to its default color. If you want the mouse-out color to be something other than black, you'll have to add another property trigger to handle that.

The ContentPresenter tag is required when you're using a ControlTemplate. It simply notifies the template where the Label's content is supposed to go. There's no limit to what visuals you can put inside the template, so if you wanted the text to be inside a blue ellipse, you could simple do something like this:

But the ins and outs of ControlTemplates are beyond the scope of this tutorial. Now that the style is written, all that's left to do is apply it to the Label.

Now if you were launch this application you'd get something that looks like the picture below. The image on the left is with the mouse outside of the Label and the image on the right is when the mouse enters the Label.

And here's the code in its entirety:

So there you have it, you've just learned how to use ControlTemplates to change the foreground color of text when the user mouses over it.