Data See, Data Do

Mike Hillberg's Blog on Wpf and Silverlight

A trigger for the TreeViewItem directly under the mouse

A trigger for the TreeViewItem directly under the mouse

Rate This
  • Comments 10

In a post to the WPF forum, martinabc wanted to define a TreeViewItem style that would trigger off whether or not the mouse was over that item.  A trigger on the IsMouseOver property sounds promising, but unfortunately IsMouseOver is true not only for the item under the mouse, but for the ancestors of that item as well. 

 

One possibility is to create a custom template for the TreeViewItem, but that’s an unfortunate amount of work.  So for fun I created an IsMouseDirectlyOverItem property.  That’s also work, but I’m posting it here so it doesn’t have to be work for anyone else.  It’s also a handy sample of most of the DependencyProperty and RoutedEvent functionality.

 

So here’s an example of the property in action (this makes the TreeViewItem currently under the mouse have a green background):

 

<Window x:Class="Scratch.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="clr-namespace:Scratch"

     >

 

  <TreeView>

    <TreeView.Resources>

      <Style TargetType="TreeViewItem">

        <Style.Triggers>

          <Trigger Property="local:MyTreeViewHelper.IsMouseDirectlyOverItem" Value="True">

            <Setter Property="Background" Value="Green" />

          </Trigger>

        </Style.Triggers>

      </Style>

    </TreeView.Resources>

   

    <TreeViewItem Header="Header">

      <TreeViewItem Header="Sub">

        <Button>Click</Button>

        <Button>Clack</Button>

        <Rectangle Width="20" Height="20" Stroke="Blue" />

      </TreeViewItem>

    </TreeViewItem>

  </TreeView>

 

</Window>

 

 

And here’s the implementation of the MyTreeViewHelper class:

 

 

public static class MyTreeViewHelper

{

    //

    // The TreeViewItem that the mouse is currently directly over (or null).

    //

    private static TreeViewItem _currentItem = null;

 

    //

    // IsMouseDirectlyOverItem:  A DependencyProperty that will be true only on the

    // TreeViewItem that the mouse is directly over.  I.e., this won't be set on that

    // parent item.

    //

    // This is the only public member, and is read-only.

    //

 

        // The property key (since this is a read-only DP)

    private static readonly DependencyPropertyKey IsMouseDirectlyOverItemKey =

        DependencyProperty.RegisterAttachedReadOnly(

                  "IsMouseDirectlyOverItem",

                  typeof(bool),

                  typeof(MyTreeViewHelper),

                  new FrameworkPropertyMetadata(null,

                        new CoerceValueCallback(CalculateIsMouseDirectlyOverItem) ));

 

        // The DP itself

    public static readonly DependencyProperty IsMouseDirectlyOverItemProperty =

        IsMouseDirectlyOverItemKey.DependencyProperty;

 

        // A strongly-typed getter for the property.

    public static bool GetIsMouseDirectlyOverItem(DependencyObject obj)

    {

        return (bool)obj.GetValue(IsMouseDirectlyOverItemProperty);

    }

 

        // A coercion method for the property

    private static object CalculateIsMouseDirectlyOverItem(DependencyObject item, object value)

    {

        // This method is called when the IsMouseDirectlyOver property is being calculated

        // for a TreeViewItem. 

 

        if (item == _currentItem)

            return true;

        else

            return false;

    }

 

    //

    // UpdateOverItem:  A private RoutedEvent used to find the nearest encapsulating

    // TreeViewItem to the mouse's current position.

    //

 

    private static readonly RoutedEvent UpdateOverItemEvent = EventManager.RegisterRoutedEvent(

        "UpdateOverItem", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyTreeViewHelper));

 

    //

    // Class constructor

    //

 

    static MyTreeViewHelper()

    {

        // Get all Mouse enter/leave events for TreeViewItem.

        EventManager.RegisterClassHandler(typeof(TreeViewItem),

                                  TreeViewItem.MouseEnterEvent,

                                  new MouseEventHandler(OnMouseTransition), true);

        EventManager.RegisterClassHandler(typeof(TreeViewItem),

                                  TreeViewItem.MouseLeaveEvent,

                                  new MouseEventHandler(OnMouseTransition), true);

 

        // Listen for the UpdateOverItemEvent on all TreeViewItem's.

        EventManager.RegisterClassHandler(typeof(TreeViewItem),

                                  UpdateOverItemEvent,

                                  new RoutedEventHandler(OnUpdateOverItem));

    }

 

   

    //

    // OnUpdateOverItem:  This method is a listener for the UpdateOverItemEvent.  When it is received,

    // it means that the sender is the closest TreeViewItem to the mouse (closest in the sense of the

    // tree, not geographically).

   

    static void OnUpdateOverItem(object sender, RoutedEventArgs args)

    {

        // Mark this object as the tree view item over which the mouse

        // is currently positioned.

        _currentItem = sender as TreeViewItem;

 

        // Tell that item to re-calculate the IsMouseDirectlyOverItem property

        _currentItem.InvalidateProperty(IsMouseDirectlyOverItemProperty);

 

        // Prevent this event from notifying other tree view items higher in the tree.

        args.Handled = true;

    }

 

    //

    // OnMouseTransition:  This method is a listener for both the MouseEnter event and

    // the MouseLeave event on TreeViewItems.  It updates the _currentItem, and updates

    // the IsMouseDirectlyOverItem property on the previous TreeViewItem and the new

    // TreeViewItem.

 

    static void OnMouseTransition(object sender, MouseEventArgs args)

    {

        lock (IsMouseDirectlyOverItemProperty)

        {

            if (_currentItem != null)

            {

                // Tell the item that previously had the mouse that it no longer does.

                DependencyObject oldItem = _currentItem;

                _currentItem = null;

                oldItem.InvalidateProperty(IsMouseDirectlyOverItemProperty);

            }

 

            // Get the element that is currently under the mouse.

            IInputElement currentPosition = Mouse.DirectlyOver;

 

            // See if the mouse is still over something (any element, not just a tree view item).

            if (currentPosition != null)

            {

                // Yes, the mouse is over something.

                // Raise an event from that point.  If a TreeViewItem is anywhere above this point

                // in the tree, it will receive this event and update _currentItem.

 

                RoutedEventArgs newItemArgs = new RoutedEventArgs(UpdateOverItemEvent);

                currentPosition.RaiseEvent(newItemArgs);

 

            }

        }

    }

 

}

 

 

Attachment: MyTreeViewHelper.zip
  • By (indirect) request, I have put together a helper class that provides a property that can be used as a trigger to determine if a MenuItem is directly under the mouse. This is analogous to th ...

  • Thank you very, very much, that is exactly what I was looking for.

  • Hi,

    thanks for your code snippet. I'm using it and it causes some problem. even if the mouse is directly over the treeviewitem still IsMouseDirectlyOverItem comes out to be false or eiher the Update event is not fired. and treeviewitem is not highlighted....

    :(

  • Hi asitkachhap -- I'm not sure what's happening, but I attached a project with the code and sample application.

    Thanks,

    Mike

  • THANKS A TON!!!! Works Perfectly !! This is exactly what I was looking for... :)

  • Thanks a ton for this. It works beautifully. How can I extend it to highlight the node that the mouse is over while dragging?

    Thanks again,

    Chris

  • How do I reference this from a DataTrigger?  I tried setting the Path to the property name used in the Trigger above, but it doesn't work.  I'm sure it is simple, but I couldn't figure it out yet!  Thank you if you can help!  I need to use a MultiDataTrigger due to some other requirements.

  • Thanks a kazillion for this great example!!

  • Thank you. Great example that saved me a ton of time!

  • I used your helper to select the current item, thank alot

Page 1 of 1 (10 items)
Leave a Comment
  • Please add 4 and 6 and type the answer here:
  • Post