How to Add DoubleClick to a ListBox in Silverlight and C#



Introduction

The trend for MVVM in Silverlight points to behaviors.  I found this behavior online for a DoubleClick Trigger in XAML shown in Listing 1 written by Nigel Sampson.  It's awesome.  Basically the way it works is if the user selects the mousedown button, a timer is started.  If the user clicks the mouse again before the timer interval is up, the actions in the trigger are invoked.

Listing 1 - Double Click Trigger Behavior for Silverlight

using System;
using
System.Windows;
using
System.Windows.Input;
using
System.Windows.Interactivity;
using
System.Windows.Threading;

 

namespace Behaviors
{

public class DoubleClickTrigger : TriggerBase<UIElement>
{
       private readonly DispatcherTimer timer;

        public DoubleClickTrigger()
      
{
              timer = new DispatcherTimer
             
{
                    
Interval = new TimeSpan(0, 0, 0, 0, 200)
              };

              timer.Tick += OnTimerTick;

       }

       protected override void OnAttached()
      
{
             
base.OnAttached();
             
AssociatedObject.MouseLeftButtonDown += OnMouseButtonDown;
       }

       protected override void OnDetaching()      
      
{
             
base.OnDetaching();
             
AssociatedObject.MouseLeftButtonDown -= OnMouseButtonDown;
 
              if (timer.IsEnabled)
                    
timer.Stop();
      
}

       private void OnMouseButtonDown(object sender, MouseButtonEventArgs e)
      
{
        
if (!timer.IsEnabled)
             
{
                    
timer.Start();
                    
return;
             
}

              timer.Stop();
             
InvokeActions(null);
       }

       private void OnTimerTick(object sender, EventArgs e)
      
{
             
timer.Stop();
       }

  }

 }

Our ListBox can implement the double click on an item through it's ItemTemplate.  Here is a sample listbox shown in listing 2


Listing 2 - ListBox in XAML

<ListBox  x:Name="SelectionListBox"              
 ScrollViewer.HorizontalScrollBarVisibility
="Hidden"                                                                      ItemsSource="{Binding Choices}"                                                                            
 ItemTemplate
="{StaticResource ChoicesTemplate}" />


Our ChoicesTemplate will contain the trigger to implement the double click functionality.  In this case we'll add the double click trigger  directly on the textbox in our template.  Notice that we also use MVVM Light's EventToCommand behavior to execute our details command after the user double clicks.  You'll want to download MVVM Light to use this great behavior. I suppose you could have just as easily have used Blend's InvokeCommandAction. EventToCommand is just so much richer.

Listing 3 - ListBox ItemTemplate Containing DoubleClick Trigger

<DataTemplate x:Key="ChoicesTemplate"> 
            <TextBlock Text="{Binding Description}"                                                                           Foreground="White" >
            
<i:Interaction.Triggers>
                
<cx:DoubleClickTrigger>
                  
<Command:EventToCommand Command="{Binding ShowDetailsCommand}" CommandParameter=
                        "{
Binding ElementName=SelectionListBox}" />
                  
</cx:DoubleClickTrigger>
             
</i:Interaction.Triggers>
           
</TextBlock>
       
</DataTemplate>

Conclusion

Some mouse functionality that was easy in Windows and WPF, is not as obvious in Silverlight.  The beauty about Silverlight is that you can create behaviors to react to almost any event you can trigger off of.  DoubleClick is one such behavior that can be mimicked through some state managed code.  You can hook the DoubleClick trigger on a textbox inside the item template and like magic, your listbox now has double click behavior on every element it displays.  Now there's a template for success in Silverlight and C#.

Up Next
    Ebook Download
    View all
    Learn
    View all