Silverlight 4: Drag&drop with EventToCommand : Silverlight Feeds

Silverlight 4: Drag&drop with EventToCommand

by Laurent Bugnion via Silverlight on 12/17/2009 4:49:31 PM

One of the MVVM Light Toolkit’s user requested that I add the possibility to pass the EventArgs of an event to the ICommand that it is bound to through the EventToCommand trigger. At first I was a bit reluctant because it seems like a transgression of the rule that says you should avoid to have too much knowledge about the UI layer in the ViewModel. For example, if you have a RelayCommand in the ViewModel that expects a MouseEventArgs, it kinds of binds you to a certain kind of UI element, which is not super clean.

That said, I also understand that in some cases it might be useful to get the EventArgs down in the ViewModel, which is why I decided to add this possibility (available from V3/alpha 3).

And in fact, as I was testing it, I just got another request from my good friend Laurent Kempé (one of the early and enthusiastic users of MVVM Light) to help use EventToCommand in the case of a drag&drop operation in Silverlight 4. That was the perfect test case for this new feature.

Note: Laurent wrote a post in French describing a drag&drop implementation.

Resources

The source code for this sample is available here. The MVVM Light Toolkit’s DLLs are also included (V3/alpha3). This code is for Visual Studio 2010 beta 2 and/or Expression Blend Preview for Silverlight 4.

You can optionally install the MVVM Light Toolkit V3/alpha3 from the Installing Manually page.

More info about the MVVM Light Toolkit is available on the Get Started page.

Creating a drag&drop enabled Silverlight application

Let’s start by creating a new MVVM Light application in Silverlight 4. In the moment the process of installing the project templates is manual, but it should be easy enough if you follow these instructions.

You can create a new MVVM Light application for Silverlight 4 in Visual Studio 2010 or in Expression Blend Preview 4. Simply choose File, New Project and then select the template called MVVM Light (SL4).

We need to define a drop target for the files in the application. This can be done for just any UI element, so you can choose the main Grid (if you want the whole application to be a drop target) or any other element. In our case, to keep things simple, let’s define the main Grid as the drop target.

Set the property AllowDrop to True, either in XAML or in Blend. Also change the other properties as shown in XAML below.
Note: We will implement the DroppedFileContent property in a moment.

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

Open the MainViewModel and add a bindable property.
Note: If you have the MVVM Light Toolkit installed, you can use a code snippet for this: Type mvvminpc then tab to expand the snippet, and enter the property’s name, tab, its type, tab and the name of the attribute. Then, edit the code until it looks like the one below:

/// <summary>
/// The <see cref="DroppedFileContent" /> property's name.
/// </summary>
public const string DroppedFileContentPropertyName = "DroppedFileContent";

private string _droppedFile = "Drop file here";

/// <summary>
/// Gets the DroppedFileContent property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public string DroppedFileContent
{
    get
    {
        return _droppedFile;
    }

    set
    {
        if (_droppedFile == value)
        {
            return;
        }

        _droppedFile = value;
        RaisePropertyChanged(DroppedFileContentPropertyName);
    }
}

Add a RelayCommand<DragEventArgs> property to the MainViewModel. Name this property HandleDropCommand. You will need to add GalaSoft.MvvmLight.Command, System and System.Windows to the “using” section.

public RelayCommand<DragEventArgs> HandleDropCommand
{
    get;
    private set;
}

Finally, in the constructor, initialize the HandleDropCommand. We will start by simply showing a MessageBox when a file is dropped.

public MainViewModel()
{
    HandleDropCommand = new RelayCommand<DragEventArgs>(e =>
    {
        System.Windows.MessageBox.Show("Drop");
    });
}

Add an EventToCommand trigger to the main Grid. This element is part of the GalaSoft.MvvmLight.Extras DLL which is referenced by default in the MVVM Light project template, so if you start like we described here, you don’t need to do anything to use EventToCommand. If you start from a non MVVM Light application, you need to add a reference to GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll
Make sure you get the V3/alpha3 version.
Make sure you reference the binaries from C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\VS10\Binaries\Silverlight).
- Build the application to make sure that you have the latest stand loaded in Blend.
- In Blend, open the Assets tab, select the EventToCommand from the Behaviors category and drag/drop it on the LayoutRoot grid.
- Then set the EventName property to “Drop”.
- Bind the Command property to the HandleDropCommand in the MainViewModel which is the Explicit Data Context of the main Grid.
  Note: To open the databinding editor, press the advanced properties widget (the small black square) next to the Command property, and select Data Binding from the context menu.

Finally, check the PassEventArgsToCommand checkbox.
Note: The combination of having an argument of type EventArgs in the RelayCommand, and the PassEventArgsToCommand property set to true will cause the event’s EventArgs to be passed directly to the RelayCommand’s parameter.

If you do not have Blend, you can also add the EventToCommand in Visual Studio in XAML:
- In the MainPage.xaml file, add two namespaces to the UserCommand tag:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Then, add the EventToCommand trigger within the LayoutRoot grid with the following XAML code:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Drop">
        <cmd:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Test the application: In Blend, press F5, or in Visual Studio press Ctrl-F5. Then, drag a file, and drop it on the main Grid. Notice how the mouse cursor indicates that the Grid is a valid drop target.

Drop the file. You should see the MessageBox proving that the RelayCommand has been called successfully.

Getting and handling the files

Now that we have the RelayCommand ready, let’s access the DragEventArgs and get the file content from there. In this sample example, we will accept TXT files, and display the first few words from the file content.

Replace the call to MessageBox within the HandleDropCommand implementation with the following code:

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

Few notes about this code:

You can get a reference to the files dropped on the target with the DragEventArgs.Data.GetData method.
Note however that since we are in Silverlight within the security sandbox, you will get a security exception if you try to access the file’s FullName. You may get the content of the file (because it is dropped by the user) but not additional information about where these files are located.
In this example, we get only the first file, but it is easy to see how we could access all the files dropped.
We do handle only TXT files in this example.
Reading the file’s content is done in an usual way, with a Stream and a StreamReader. Note the presence of the “using” statements, to make it easier (no need to explicitly close and dispose the stream and the reader). For binary files, we would use a BinaryReader, etc…

An issue with Visual Studio 2010

In the course of preparing this article, I noticed an issue in Visual Studio 2010 when I attempt to debug the HandleDropCommand implementation. Even with a breakpoint placed within the code, the debugger does not break. I am not sure right now what is the reason, and the code does get executed, but this complicates debugging of course. I am investigating and talking to Microsoft about that, but right now I am not sure where it comes from.

Conclusion

In the MVVM pattern, we generally try to avoid putting too much code in the code behind because it complicates the developer-designer workflow. Though I am not a puritan about that :) I think that EventToCommand and the new PassEventArgsToCommand property are reasonable steps to make UI interaction such as drag&drop even easier to code.

Hope you like it :)