Handling Image Drag Event in MVVM?

Question

HI All,
Am Developing WPF App Where in my requirement is drag and drop images,I can do this easily using code behind file but i need to do the same thing in Viewmodel.
I tried Following Code.
<Grid>
<DockPanel>
<ListBox x:Name="Images">
<ListBox.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
 <!--<EventSetter Event="MouseLeftButtonDown" Handler="DragImage"/>-->
<!--Below code am binding in My View Model-->
<Setter Property="local:CommandBehavior.Event" Value="MouseLeftButtonDown" />
<Setter Property="local:CommandBehavior.Command"
Value="{Binding DataContext.ImageCommand,
RelativeSource={RelativeSource Self}}" />
</Style>
</ListBox.Resources>
<ListBoxItem>
<Image Source="Assests/A.Jpg"/>
</ListBoxItem>
<ListBoxItem>
<Image Source="Assests/B.Jpg"/>
</ListBoxItem>
</ListBox>
<Canvas x:Name="Canvas" AllowDrop="True" Background="Aqua" Drop="DropImage"/>
</DockPanel>
</Grid>Below is my viewmodel code. i can able to hit the view model but am not getting "MouseButtonEventArgs" and "DragEventArgs"
#region Properties
private ICommand _ImageCommand;
public ICommand ImageCommand
get
return _ImageCommand;
set
_ImageCommand = value;
public ActionCommand<MouseButtonEventArgs> DropCommand { get; private set; }
#endregion
public MainViewModel()
////if (IsInDesignMode)
//// // Code runs in Blend --> create design time data.
////else
//// // Code runs "for real"
ImageCommand = new RelayCommand<MouseButtonEventArgs>(ShowMessage);
this.DropCommand = new ActionCommand<MouseButtonEventArgs>(ShowMessage);
private void ShowMessage()
//throw new NotImplementedException();
private void ShowMessage(object obj)
throw new NotImplementedException();
Any Suggestion Would be of Great Help
Thanks
Arjun

Answer 1

There is indeed a fair bit of code there.
You could consider eventtocommand.
I use that for handing conversion errors from the view to the viewmodel:
https://gallery.technet.microsoft.com/Keeping-your-MVVM-Views-3927bc74
<i:Interaction.Triggers>
<local:RoutedEventTrigger RoutedEvent="{x:Static Validation.ErrorEvent}">
<e2c:EventToCommand Command="{Binding ConversionErrorCommand, Mode=OneWay}"
EventArgsConverter="{StaticResource BindingErrorEventArgsConverter}"
PassEventArgsToCommand="True" />
</local:RoutedEventTrigger>
</i:Interaction.Triggers>
Which is obviously not drag and drop but same principle.
You will need to write a converter.
Or you could use just an event handler and communicate between the view and viewmodel using messenger.  You can send anything you like in the message object.
Test code coverage might slip a little but it's sometimes way easier to have an actual event handler in code there.
You probably know of messenger since you're using relaycommand there but:
http://social.technet.microsoft.com/wiki/contents/articles/26070.communicating-between-classes.aspx
Hope that helps.
Recent Technet articles: Property List Editing;
Dynamic XAML