How can I cancel a user's WPF TreeView click?

Question

I've got a WPF application with a Treeview control.

When the user clicks a node on the tree, other TextBox, ComboBox, etc. controls on the page are populated with appropriate values.

The user can then make changes to those values and save his or her changes by clicking a Save button.

However, if the user selects a different Treeview node without saving his or her changes, I want to display a warning and an opportunity to cancel that selection.

MessageBox: Continue and discard your unsaved changes? OK/Cancel http://img522.imageshack.us/img522/2897/discardsj3.gif

XAML...

<TreeView Name="TreeViewThings"
    ...
    TreeViewItem.Unselected="TreeViewThings_Unselected"
    TreeViewItem.Selected="TreeViewThings_Selected" >

Visual Basic...

Sub TreeViewThings_Unselected(ByVal sender As System.Object, _
                              ByVal e As System.Windows.RoutedEventArgs)
    Dim OldThing As Thing = DirectCast(e.OriginalSource.DataContext, Thing)
    If CancelDueToUnsavedChanges(OldThing) Then
        'put canceling code here
    End If
End Sub

Sub TreeViewThings_Selected(ByVal sender As System.Object, _
                            ByVal e As System.Windows.RoutedEventArgs)
    Dim NewThing As Thing = DirectCast(e.OriginalSource.DataContext, Thing)
    PopulateControlsFromThing(NewThing)
End Sub

How can I cancel those unselect/select events?

---

Update: I've asked a follow-up question...
How do I properly handle a PreviewMouseDown event with a MessageBox confirmation?

Answer 1

UPDATE

Realized I could put the logic in SelectedItemChanged instead. A little cleaner solution.

Xaml

<TreeView Name="c_treeView"
          SelectedItemChanged="c_treeView_SelectedItemChanged">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

Code behind. I have some classes that is my ItemsSource of the TreeView so I made an interface (MyInterface) that exposes the IsSelected property for all of them.

private MyInterface m_selectedTreeViewItem = null;
private void c_treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    if (m_selectedTreeViewItem != null)
    {
        if (e.NewValue == m_selectedTreeViewItem)
        {
            // Will only end up here when reversing item
            // Without this line childs can't be selected
            // twice if "No" was pressed in the question..   
            c_treeView.Focus();   
        }
        else
        {
            if (MessageBox.Show("Change TreeViewItem?",
                                "Really change",
                                MessageBoxButton.YesNo,
                                MessageBoxImage.Question) != MessageBoxResult.Yes)
            {
                EventHandler eventHandler = null;
                eventHandler = new EventHandler(delegate
                {
                    c_treeView.LayoutUpdated -= eventHandler;
                    m_selectedTreeViewItem.IsSelected = true;
                });
                // Will be fired after SelectedItemChanged, to early to change back here
                c_treeView.LayoutUpdated += eventHandler;
            }   
            else
            {
                m_selectedTreeViewItem = e.NewValue as MyInterface;
            }        
        }
    }
    else
    {
        m_selectedTreeViewItem = e.NewValue as MyInterface;
    }
}

I haven't found any situation where it doesn't revert back to the previous item upon pressing "No".

Answer 2

I had to solve the same problem, but in multiple treeviews in my application. I derived TreeView and added event handlers, partly using Meleak's solution and partly using the extension methods from this forum: http://forums.silverlight.net/t/65277.aspx/1/10

I thought I'd share my solution with you, so here is my complete reusable TreeView that handles "cancel node change":

public class MyTreeView : TreeView
{
    public static RoutedEvent PreviewSelectedItemChangedEvent;
    public static RoutedEvent SelectionCancelledEvent;

    static MyTreeView()
    {
        PreviewSelectedItemChangedEvent = EventManager.RegisterRoutedEvent("PreviewSelectedItemChanged", RoutingStrategy.Bubble,
                                                                           typeof(RoutedPropertyChangedEventHandler<object>), typeof(MyTreeView));

        SelectionCancelledEvent = EventManager.RegisterRoutedEvent("SelectionCancelled", RoutingStrategy.Bubble,
                                                                   typeof(RoutedEventHandler), typeof(MyTreeView));
    }

    public event RoutedPropertyChangedEventHandler<object> PreviewSelectedItemChanged
    {
        add { AddHandler(PreviewSelectedItemChangedEvent, value); }
        remove { RemoveHandler(PreviewSelectedItemChangedEvent, value); }
    }

    public event RoutedEventHandler SelectionCancelled
    {
        add { AddHandler(SelectionCancelledEvent, value); }
        remove { RemoveHandler(SelectionCancelledEvent, value); }
    }


    private object selectedItem = null;
    protected override void OnSelectedItemChanged(RoutedPropertyChangedEventArgs<object> e)
    {
        if (e.NewValue == selectedItem)
        {
            this.Focus();

            var args = new RoutedEventArgs(SelectionCancelledEvent);
            RaiseEvent(args);
        }
        else
        {
            var args = new RoutedPropertyChangedEventArgs<object>(e.OldValue, e.NewValue, PreviewSelectedItemChangedEvent);
            RaiseEvent(args);

            if (args.Handled)
            {
                EventHandler eventHandler = null;
                eventHandler = delegate
                {
                    this.LayoutUpdated -= eventHandler;

                    var treeViewItem = this.ContainerFromItem(selectedItem);
                    if (treeViewItem != null)
                        treeViewItem.IsSelected = true;
                };

                this.LayoutUpdated += eventHandler;
            }
            else
            {
                selectedItem = this.SelectedItem;
                base.OnSelectedItemChanged(e);
            }
        }
    }
}

public static class TreeViewExtensions
{
    public static TreeViewItem ContainerFromItem(this TreeView treeView, object item)
    {
        if (item == null) return null;

        var containerThatMightContainItem = (TreeViewItem)treeView.ItemContainerGenerator.ContainerFromItem(item);

        return containerThatMightContainItem ?? ContainerFromItem(treeView.ItemContainerGenerator, treeView.Items, item);
    }

    private static TreeViewItem ContainerFromItem(ItemContainerGenerator parentItemContainerGenerator, ItemCollection itemCollection, object item)
    {
        foreach (var child in itemCollection)
        {
            var parentContainer = (TreeViewItem)parentItemContainerGenerator.ContainerFromItem(child);
            var containerThatMightContainItem = (TreeViewItem)parentContainer.ItemContainerGenerator.ContainerFromItem(item);

            if (containerThatMightContainItem != null)
                return containerThatMightContainItem;

            var recursionResult = ContainerFromItem(parentContainer.ItemContainerGenerator, parentContainer.Items, item);
            if (recursionResult != null)
                return recursionResult;
        }
        return null;
    }
}

Here is an example of usage (codebehind for window containing a MyTreeView):

    private void theTreeView_PreviewSelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        if (e.OldValue != null)
            e.Handled = true;
    }

    private void theTreeView_SelectionCancelled(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Cancelled");
    }

After choosing the first node in the treeview, all other node changes are cancelled and a message box is displayed.

Answer 3

You can't actually put your logic into the OnSelectedItemChanged Method, if the logic is there the Selected Item has actually already changed.

As suggested by another poster, the PreviewMouseDown handler is a better spot to implement the logic, however, a fair amount of leg work still needs to be done.

Below is my 2 cents:

First the TreeView that I have implemented:

public class MyTreeView : TreeView
{
    static MyTreeView( )
    {
        DefaultStyleKeyProperty.OverrideMetadata(
            typeof(MyTreeView),
            new FrameworkPropertyMetadata(typeof(TreeView)));
    }

    // Register a routed event, note this event uses RoutingStrategy.Tunnel. per msdn docs
    // all "Preview" events should use tunneling.
    // http://msdn.microsoft.com/en-us/library/system.windows.routedevent.routingstrategy.aspx
    public static RoutedEvent PreviewSelectedItemChangedEvent = EventManager.RegisterRoutedEvent(
        "PreviewSelectedItemChanged",
        RoutingStrategy.Tunnel,
        typeof(CancelEventHandler),
        typeof(MyTreeView));

    // give CLR access to routed event
    public event CancelEventHandler PreviewSelectedItemChanged
    {
        add
        {
            AddHandler(PreviewSelectedItemChangedEvent, value);
        }
        remove
        {
            RemoveHandler(PreviewSelectedItemChangedEvent, value);
        }
    }

    // override PreviewMouseDown
    protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
    {
        // determine which item is going to be selected based on the current mouse position
        object itemToBeSelected = this.GetObjectAtPoint<TreeViewItem>(e.GetPosition(this));

        // selection doesn't change if the target point is null (beyond the end of the list)
        // or if the item to be selected is already selected.
        if (itemToBeSelected != null && itemToBeSelected != SelectedItem)
        {
            bool shouldCancel;

            // call our new event
            OnPreviewSelectedItemChanged(out shouldCancel);
            if (shouldCancel)
            {
                // if we are canceling the selection, mark this event has handled and don't
                // propogate the event.
                e.Handled = true;
                return;
            }
        }

        // otherwise we want to continue normally
        base.OnPreviewMouseDown(e);
    }

    protected virtual void OnPreviewSelectedItemChanged(out bool shouldCancel)
    {
        CancelEventArgs e = new CancelEventArgs( );
        if (PreviewSelectedItemChangedEvent != null)
        {
            // Raise our event with our custom CancelRoutedEventArgs
            RaiseEvent(new CancelRoutedEventArgs(PreviewSelectedItemChangedEvent, e));
        }
        shouldCancel = e.Cancel;
    }
}

some extension methods to support the TreeView finding the object under the mouse.

public static class ItemContainerExtensions
{
    // get the object that exists in the container at the specified point.
    public static object GetObjectAtPoint<ItemContainer>(this ItemsControl control, Point p)
        where ItemContainer : DependencyObject
    {
        // ItemContainer - can be ListViewItem, or TreeViewItem and so on(depends on control)
        ItemContainer obj = GetContainerAtPoint<ItemContainer>(control, p);
        if (obj == null)
            return null;

        // it is worth noting that the passed _control_ may not be the direct parent of the
        // container that exists at this point. This can be the case in a TreeView, where the
        // parent of a TreeViewItem may be either the TreeView or a intermediate TreeViewItem
        ItemsControl parentGenerator = obj.GetParentItemsControl( );

        // hopefully this isn't possible?
        if (parentGenerator == null)
            return null;

        return parentGenerator.ItemContainerGenerator.ItemFromContainer(obj);
    }

    // use the VisualTreeHelper to find the container at the specified point.
    public static ItemContainer GetContainerAtPoint<ItemContainer>(this ItemsControl control, Point p)
        where ItemContainer : DependencyObject
    {
        HitTestResult result = VisualTreeHelper.HitTest(control, p);
        DependencyObject obj = result.VisualHit;

        while (VisualTreeHelper.GetParent(obj) != null && !(obj is ItemContainer))
        {
            obj = VisualTreeHelper.GetParent(obj);
        }

        // Will return null if not found
        return obj as ItemContainer;
    }

    // walk up the visual tree looking for the nearest ItemsControl parent of the specified
    // depObject, returns null if one isn't found.
    public static ItemsControl GetParentItemsControl(this DependencyObject depObject)
    {
        DependencyObject obj = VisualTreeHelper.GetParent(depObject);
        while (VisualTreeHelper.GetParent(obj) != null && !(obj is ItemsControl))
        {
            obj = VisualTreeHelper.GetParent(obj);
        }

        // will return null if not found
        return obj as ItemsControl;
    }
}

and last, but not least the custom EventArgs that leverage the RoutedEvent subsystem.

public class CancelRoutedEventArgs : RoutedEventArgs
{
    private readonly CancelEventArgs _CancelArgs;

    public CancelRoutedEventArgs(RoutedEvent @event, CancelEventArgs cancelArgs)
        : base(@event)
    {
        _CancelArgs = cancelArgs;
    }

    // override the InvokeEventHandler because we are going to pass it CancelEventArgs
    // not the normal RoutedEventArgs
    protected override void InvokeEventHandler(Delegate genericHandler, object genericTarget)
    {
        CancelEventHandler handler = (CancelEventHandler)genericHandler;
        handler(genericTarget, _CancelArgs);
    }

    // the result
    public bool Cancel
    {
        get
        {
            return _CancelArgs.Cancel;
        }
    }
}

Answer 4

Instead of selecting for Selected/Unselected, a better route might be to hook into PreviewMouseDown. The preblem with handling a Selected and Unselected event is that the event has already occurred when you receive the notification. There is nothing to cancel because it's already happened.

On the other hand, Preview events are cancelable. It's not the exact event you want but it does give you the oppuritunity to prevent the user from selecting a different node.

Answer 5

You can't cancel the event like you can, for example, a Closing event. But you can undo it if you cache the last selected value. The secret is you have to change the selection without re-firing the SelectionChanged event. Here's an example:

    private object _LastSelection = null;
    private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (IsUpdated)
        {
            MessageBoxResult result = MessageBox.Show("The current record has been modified. Are you sure you want to navigate away? Click Cancel to continue editing. If you click OK all changes will be lost.", "Warning", MessageBoxButton.OKCancel, MessageBoxImage.Hand);
            switch (result)
            {
                case MessageBoxResult.Cancel:
                    e.Handled = true;
                    // disable event so this doesn't go into an infinite loop when the selection is changed to the cached value
                    PersonListView.SelectionChanged -= new SelectionChangedEventHandler(OnSelectionChanged);
                    PersonListView.SelectedItem = _LastSelection;
                    PersonListView.SelectionChanged += new SelectionChangedEventHandler(OnSelectionChanged);
                    return;
                case MessageBoxResult.OK:
                    // revert the object to the original state
                    LocalDataContext.Persons.GetOriginalEntityState(_LastSelection).CopyTo(_LastSelection);
                    IsUpdated = false;
                    Refresh();
                    break;
                default:
                    throw new ApplicationException("Invalid response.");
            }
        }

        // cache the selected item for undo
        _LastSelection = PersonListView.SelectedItem;
    }

Answer 6

CAMS_ARIES:

XAML:

code :

  private bool ManejarSeleccionNodoArbol(Object origen)
    {
        return true;  // with true, the selected nodo don't change
        return false // with false, the selected nodo change
    }


    private void Arbol_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {            
        if (e.Source is TreeViewItem)
        {
            e.Handled = ManejarSeleccionNodoArbol(e.Source);
        }
    }

    private void Arbol_PreviewKeyDown(object sender, KeyEventArgs e)
    {
        if (e.Source is TreeViewItem)
        {
           e.Handled=ManejarSeleccionNodoArbol(e.Source);
        }
    }         

Answer 7

Since the SelectedItemChanged event is triggered after the SelectedItem has already changed, you can't really cancel the event at this point.

What you can do is listen for mouse-clicks and cancel them before the SelectedItem gets changed.

Answer 8

You could create your custom control that derives from TreeView and then override the OnSelectedItemChanged method.

Before calling the base, you could first fire a custom event with a CancelEventArgs parameter. If the parameter.Cancel become true, then don't call the base, but select the old item instead (be careful that the OnSelectedItemChanged will be called again).

Not the best solution, but at least this keeps the logic inside the tree control, and there is not chance that the selection change event fires more than it's needed. Also, you don't need to care if the user clicked the tree, used the keyboard or maybe the selection changed programatically.

Answer 9

I solved this problem for 1 tree view and display of 1 document at a time. This solution is based on an attachable behavior that can be attached to a normal treeview:

<TreeView Grid.Column="0"
       ItemsSource="{Binding TreeViewItems}"
       behav:TreeViewSelectionChangedBehavior.ChangedCommand="{Binding SelectItemChangedCommand}"
       >
     <TreeView.ItemTemplate>
         <HierarchicalDataTemplate ItemsSource="{Binding Children}">
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding Name}"
                         ToolTipService.ShowOnDisabled="True"
                         VerticalAlignment="Center" Margin="3" />
             </StackPanel>
         </HierarchicalDataTemplate>
     </TreeView.ItemTemplate>
     <TreeView.ItemContainerStyle>
         <Style TargetType="{x:Type TreeViewItem}">
             <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
             <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
         </Style>
     </TreeView.ItemContainerStyle>
</TreeView>

and the code for the behavior is this:

/// <summary>
/// Source:
/// http://stackoverflow.com/questions/1034374/drag-and-drop-in-mvvm-with-scatterview
/// http://social.msdn.microsoft.com/Forums/de-DE/wpf/thread/21bed380-c485-44fb-8741-f9245524d0ae
/// 
/// Attached behaviour to implement the SelectionChanged command/event via delegate command binding or routed commands.
/// </summary>
public static class TreeViewSelectionChangedBehavior
{
#region fields
/// <summary>
/// Field of attached ICommand property
/// </summary>
private static readonly DependencyProperty ChangedCommandProperty = DependencyProperty.RegisterAttached(
  "ChangedCommand",
  typeof(ICommand),
  typeof(TreeViewSelectionChangedBehavior),
  new PropertyMetadata(null, OnSelectionChangedCommandChange));

/// <summary>
/// Implement backing store for UndoSelection dependency proeprty to indicate whether selection should be
/// cancelled via MessageBox query or not.
/// </summary>
public static readonly DependencyProperty UndoSelectionProperty =
  DependencyProperty.RegisterAttached("UndoSelection",
  typeof(bool),
  typeof(TreeViewSelectionChangedBehavior),
  new PropertyMetadata(false, OnUndoSelectionChanged));
#endregion fields

#region methods
#region ICommand changed methods
/// <summary>
/// Setter method of the attached ChangedCommand <seealso cref="ICommand"/> property
/// </summary>
/// <param name="source"></param>
/// <param name="value"></param>
public static void SetChangedCommand(DependencyObject source, ICommand value)
{
  source.SetValue(ChangedCommandProperty, value);
}

/// <summary>
/// Getter method of the attached ChangedCommand <seealso cref="ICommand"/> property
/// </summary>
/// <param name="source"></param>
/// <returns></returns>
public static ICommand GetChangedCommand(DependencyObject source)
{
  return (ICommand)source.GetValue(ChangedCommandProperty);
}
#endregion ICommand changed methods

#region UndoSelection methods
public static bool GetUndoSelection(DependencyObject obj)
{
  return (bool)obj.GetValue(UndoSelectionProperty);
}

public static void SetUndoSelection(DependencyObject obj, bool value)
{
  obj.SetValue(UndoSelectionProperty, value);
}
#endregion UndoSelection methods

/// <summary>
/// This method is hooked in the definition of the <seealso cref="ChangedCommandProperty"/>.
/// It is called whenever the attached property changes - in our case the event of binding
/// and unbinding the property to a sink is what we are looking for.
/// </summary>
/// <param name="d"></param>
/// <param name="e"></param>
private static void OnSelectionChangedCommandChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
  TreeView uiElement = d as TreeView;  // Remove the handler if it exist to avoid memory leaks

  if (uiElement != null)
  {
      uiElement.SelectedItemChanged -= Selection_Changed;

      var command = e.NewValue as ICommand;
      if (command != null)
      {
          // the property is attached so we attach the Drop event handler
          uiElement.SelectedItemChanged += Selection_Changed;
      }
  }
}

/// <summary>
/// This method is called when the selection changed event occurs. The sender should be the control
/// on which this behaviour is attached - so we convert the sender into a <seealso cref="UIElement"/>
/// and receive the Command through the <seealso cref="GetChangedCommand"/> getter listed above.
/// 
/// The <paramref name="e"/> parameter contains the standard EventArgs data,
/// which is unpacked and reales upon the bound command.
/// 
/// This implementation supports binding of delegate commands and routed commands.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private static void Selection_Changed(object sender, RoutedPropertyChangedEventArgs<object> e)
{
  var uiElement = sender as TreeView;

  // Sanity check just in case this was somehow send by something else
  if (uiElement == null)
      return;

  ICommand changedCommand = TreeViewSelectionChangedBehavior.GetChangedCommand(uiElement);

  // There may not be a command bound to this after all
  if (changedCommand == null)
      return;

  // Check whether this attached behaviour is bound to a RoutedCommand
  if (changedCommand is RoutedCommand)
  {
      // Execute the routed command
      (changedCommand as RoutedCommand).Execute(e.NewValue, uiElement);
  }
  else
  {
      // Execute the Command as bound delegate
      changedCommand.Execute(e.NewValue);
  }
}

/// <summary>
/// Executes when the bound boolean property indicates that a user should be asked
/// about changing a treeviewitem selection instead of just performing it.
/// </summary>
/// <param name="d"></param>
/// <param name="e"></param>
private static void OnUndoSelectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
  TreeView uiElement = d as TreeView;  // Remove the handler if it exist to avoid memory leaks

  if (uiElement != null)
  {
      uiElement.PreviewMouseDown -= uiElement_PreviewMouseDown;

      var command = (bool)e.NewValue;
      if (command == true)
      {
          // the property is attached so we attach the Drop event handler
          uiElement.PreviewMouseDown += uiElement_PreviewMouseDown;
      }
  }
}

/// <summary>
/// Based on the solution proposed here:
/// Source: http://stackoverflow.com/questions/20244916/wpf-treeview-selection-change
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private static void uiElement_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
  // first did the user click on a tree node?
  var source = e.OriginalSource as DependencyObject;
  while (source != null && !(source is TreeViewItem))
      source = VisualTreeHelper.GetParent(source);

  var itemSource = source as TreeViewItem;
  if (itemSource == null)
      return;

  var treeView = sender as TreeView;
  if (treeView == null)
      return;

  bool undoSelection = TreeViewSelectionChangedBehavior.GetUndoSelection(treeView);
  if (undoSelection == false)
      return;

  // Cancel the attempt to select an item.
  var result = MessageBox.Show("The current document has unsaved data. Do you want to continue without saving data?", "Are you really sure?",
                               MessageBoxButton.YesNo, MessageBoxImage.Question, MessageBoxResult.No);

  if (result == MessageBoxResult.No)
  {
      // Cancel the attempt to select a differnet item.
      e.Handled = true;
  }
  else
  {
      // Lets disable this for a moment, otherwise, we'll get into an event "recursion"
      treeView.PreviewMouseDown -= uiElement_PreviewMouseDown;

      // Select the new item - make sure a SelectedItemChanged event is fired in any case
      // Even if this means that we have to deselect/select the one and the same item
      if (itemSource.IsSelected == true )
          itemSource.IsSelected = false;

      itemSource.IsSelected = true;

      // Lets enable this to get back to business for next selection
      treeView.PreviewMouseDown += uiElement_PreviewMouseDown;
  }
}
#endregion methods
}

In this example I am showing a blocking message box in order to block the PreviewMouseDown event when it occurs. The event is then handled to signal that selection is cancelled or it is not handled to let the treeview itself handle the event by selecting the item that is about to be selected.

The behavior then invokes a bound command in the viewmodel if the user decides to continue anyway (PreviewMouseDown event is not handled by attached behavior and bound command is invoked.

I guess the message box showing could be done in other ways but I think its essential here to block the event when it happens since its otherwise not possible to cancel it(?). So, the only improve I could possible think off about this code is to bind some strings to make the displayed message configurable.

I have written an article that contains a downloadable sample since this is otherwise a difficult area to explain (one has to make many assumptions about missing parts that and the may not always be shared by all readers)

Here is an article that contains my results: http://www.codeproject.com/Articles/995629/Cancelable-TreeView-Navigation-for-Documents-in-WP

Please comment on this solution and let me know if you see room for improvement.