How do I implement the MouserHover event in my usercontrol?

Question

0.00/5 (No votes)

See more:

Here is the thing, I created a usercontrol for my application to show something. To make it more beautiful, I want to implement some kind of effect that the border of this usercontrol will change color when the mouse hover over it (as if it gets focus). Here is the structure of my usercontrol:

HTML

<UserControl ......>
    <Border Name="questionBorder" BorderThickness="3" BorderBrush="Transparent">
        <Grid>......</Grid>
    </Border>
</UserControl>

I remember that there is an event named MouseHover, but sadly I couldn't find it.
I apprieciate your help ;)

Supplementary: When I tried "UserControl_MouseEnter"

C#

private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
    questionBorder.BorderBrush = new SolidColorBrush(Color.FromRgb(9, 163, 220));
}

and "UserControl_MouseLeave"

C#

private void UserControl_MouseLeave(object sender, MouseEventArgs e)
{
    questionBorder.BorderBrush = Brushes.Transparent;
}

they kind of helped me. However, when my mouse was hovering over the blank area (still inside the area of usercontrol), the border became transparent.

Posted 30-Aug-15 21:29pm

Wu Jiecheng

Updated 30-Aug-15 21:42pm

v2

Add a Solution

2 solutions

Solution 1

That is quiet right because, when the Mouse is over a Sub-Control of your UserControl, it isn't anymore over the UserControl itself. It's a part of the philosophie ... The Mouse could allways only be over one Control.

What you can do now is :
You ask in the MouseLeave-Method if the UserControl-Rectangle contais the actual MousePosition. If not change the Border.
Therefore it is necessary that no inner Control directly bounds to the outside of the UserControl.

(Code removed)

Posted 30-Aug-15 23:21pm

Ralf Meier

Updated 31-Aug-15 5:33am

v2

Comments

Wu Jiecheng 31-Aug-15 6:00am

Thanks for your brilliant idea, but it seems that my usercontrol (derived from "UserControl") doesn't have the definitions of "RectangleToScreen" and "ClientRectangle":(
Is there any way I can fix this?

Ralf Meier 31-Aug-15 9:14am

I'm sorry ... but before I wrote it I tested it(but in the code of the UserControl itself - but that not make any difference).
Which .Net-Version are you using ? (I tried it with .Net-Framework 4.0).

Wu Jiecheng 31-Aug-15 10:14am

Thanks for your patient explanation.
I'm using a .Net Framework 4.5.

Ralf Meier 31-Aug-15 10:40am

I think that doesn't make the difference. It must be anywhere else. The posted methods are also content of this framework.
What Assemblies are part of your solution ?

Ralf Meier 31-Aug-15 10:48am

I'm sorry ... I don't know anymore how I created it with that code - I can't reproduce it - bet for apologize ... (I'm a Forms-Developer).
But I think, you are right. So I looked for a Link for you. Perhaps it helps you further :
http://stackoverflow.com/questions/6931333/wpf-converting-between-screen-coordinates-and-wpf-coordinates

Another way could be :
You catch the Entered-Event of each internal Control too and do the same as with the Entered-Event of the UserControl itself. But for those elements don't use the Leaved-Event ...

Wu Jiecheng 31-Aug-15 21:16pm

The link you gave me was about getting the coordinates of a WPF window from a monitor, that was not my point. And I tried your second way, it had the same effect when I merely implemented the UserControl_MouseEntered. I'm thinking of giving up implementing this Border thing.
Again, thank you so much for your efforts explaining and searching, hope you have a good day:)

Ralf Meier 1-Sep-15 4:13am

Don't give up ...
But I must say that there is a great difference in the handling of those things between Forms and WPF.
-
You are right with the coordinates. But the Mousecursor-coordinates should also be screen-coordinates - so you could compare ...
-
If done right (perhaps you show the code), my 2nd suggestions must work (nearly) properly. Perhaps you try something like this :
If you get the UserControl.Entered or the UserConrol.SubControl.Entered you set a Boolean for each to true.
If you get the UserControl.Leaved or the UserConrol.SubControl.Leaved you set a Boolean for each to false.
With a Timer you compare if each of the booleans is true. In this case you set your border. Are every of the (state)Booleans = false then reset the border.
Do you understand what I mean ...?

Wu Jiecheng 1-Sep-15 21:46pm

It seems that even I put my mouse inside the container control ( e.g. Border, Grid and so on) but over a blank area, WPF doesn't consider the mouse is hovering over the container.

Ralf Meier 2-Sep-15 8:16am

What is "the blank area" ? I think it is also control ...

Wu Jiecheng 2-Sep-15 9:37am

@U. G. Leander just solved my question! It's done if I set the HorizontalAlignment and VerticalAlignment properties to be Stretch.

Ralf Meier 3-Sep-15 4:34am

Hi Wu,
Thank you for your reply.
I still followed the Thread and the other suggestion and I'm also happy that your issue could be solved ...
Greetings from Germany ...

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

U. G. Leander · Accepted Answer · 2015-09-01T00:10:00

The class System.Windows.UIElement (from which UserControl indirectly derives) has a dependency property called IsMouseOver. You could use a Trigger in your .xaml-file for setting the border color depending on the value (True/False) of this property.

Here ist a good explanation how to achieve this behaviour:
http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/

Edit:

I've made an example which works by only using Triggers:

<Window x:Class="BorderColor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
      
        <UserControl BorderThickness="3">
            <UserControl.Style>
                <Style TargetType="UserControl">
                    <Setter Property="BorderBrush" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </UserControl.Style>

            <Grid>
                <TextBlock Text="Hello!" FontSize="28" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Justify">
                </TextBlock>
            </Grid>

        </UserControl>        
        
</Window>

The important thing here is, that the border of the UserControl itself is used instead of an extra border. Additionally, the whole UserControl has to be filled with content (therefore the alignments of the TextBox are set to Stretch). So, you can put inside the Grid whatever you want, just make sure all the available space of the UserControl ist used/filled.

I hope this is what you wanted to achieve.

Edit 2:

To avoid those "empty spaces", you could e.g. insert an empty label in your grid with the appropriate row and column spans. A simple example (without row or column definitions):

<Grid>
    <Label Width="Auto" Height="Auto"></Label>
    <TextBlock Text="Hello!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center">
    </TextBlock>
</Grid>