Handling Image Drag Event in MVVM? RRS feed

  • 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
                    return _ImageCommand;
                    _ImageCommand = value;
            public ActionCommand<MouseButtonEventArgs> DropCommand { get; private set; }
            public MainViewModel()
                ////if (IsInDesignMode)
                ////    // Code runs in Blend --> create design time data.
                ////    // 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



    Friday, March 13, 2015 10:54 AM


All replies

  • This codeproject article has a bunch of interfaces which allow drag and drop.


    Hope that helps.
    Recent Technet articles: Property List Editing; Dynamic XAML

    Friday, March 13, 2015 3:23 PM
  • Hi Andy,

    Thanks for your reply,

    That Article does solve the problem but it includes lot more code.

    In the above code that i have posted only thing i need to do is get mouseventargs once i try to drag an item from my lsit box the event is triggered in my view model but am getting mouse eventargs as null.

    Any suggestion would be of great help.



    Monday, March 16, 2015 5:27 AM
  • 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:


                    <local:RoutedEventTrigger RoutedEvent="{x:Static Validation.ErrorEvent}"> 
                        <e2c:EventToCommand   Command="{Binding ConversionErrorCommand, Mode=OneWay}" 
                                                EventArgsConverter="{StaticResource BindingErrorEventArgsConverter}" 
                                                PassEventArgsToCommand="True" /> 

    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:


    Hope that helps.
    Recent Technet articles: Property List Editing; Dynamic XAML

    Monday, March 16, 2015 10:14 AM