Drag N Drop Of images in WPF

I have designed an application  to drag and drop one image onto other. Basically it requires

• Mouse Down Event
• Mouse Move Event
• Drop Event
• Allow Drop Property

Lets create a sample application
I take 2 pictures & 2empty images & place them on my canvas
Something like this

The 2 Empty  images should implement  Drop Event.
Also their Allow Drop property should be true
Other two source images should implement Mouse Down & Mouse Move events.

Capture the mousedown event & keep flag

 private void Source_MouseDown(object sender, MouseButtonEventArgs e)
    {
            IsMouseDown = true;
     }

once mouse down event. copy the source image's path as dragdrop event something like this
private void Source_MouseMove(object sender, MouseEventArgs e)
        {
            if (IsMouseDown)
            {
                Image sourceImage = e.Source as Image;
                                             
                DataObject data = new DataObject(typeof(ImageSource), sourceImage.Source);
                DragDrop.DoDragDrop(sourceImage, data, DragDropEffects.Copy);
            }
            IsMouseDown = false;
        }



There are 6 operations that you can do as a part of  DODragDropEvent

• DragDropEffects.Copy
• DragDropEffects.All
• DragDropEffects.Link
• DragDropEffects.Move
• DragDropEffects.None
• DragDropEffects.Scroll

I am copying the Image's source in DataObject which will passed to DragEvents

Once you drop the mouse onto Destination image's area. Drop events gets fired. Here we need to extract the image's source & set the destination's Images source accordingly.
  private void Destination_Drop(object sender, DragEventArgs e)
        {
            ImageSource DestinationImageSource = e.Data.GetData(typeof(ImageSource)) as ImageSource;
            Image DestinationImage = e.Source as Image;
            DestinationImage.Source = DestinationImageSource;
                   
        }


That's it, Drag & drop is achieved.

Using Resource Dictionary for multi language support

WPF Provides nice concept of resource dictionary where you can define your resources (key value pairs) used across the application. For each language you need to create separate resource dictionary & the same can be used in XAML files with no much effort.

Lets create a resource dictionary for Ducth.

Similarly lets create one more resource dictionary for English With same Keys.

Now Create two forms one to select  the language & One to see how localisation Works.

 Once you select the language from combo box Load that respective resource dictionary into application .
Something like this. I have written in my App.Xaml.cs

Call this method in your language selection form

Once this is done

Create new form something like this

The cs file will look like this,

If you see the code.. you can find all the label's content will be pointed to dynamic resource
Context={DynamicResource Key}
key is defined in all the resource dictionaries of respective languages.

Now Run the application you can see the labels content getting changed based on the selection of language.

Stylesheets in WPF

As we create Stylesheets in HTML, Similarly we can create Styles in WPF application, which can be inherited by all the UI components in WPF based application.

 Changing the property of a control in Stylesheets will change that property across entire application, which is inheriting the stylesheets. As we have inline styles & cascading styles in html ,the same concept I found in WPF. If you define styles inline then they override the inherited property of styles. Here also we find that kind of parent child relationship.

Defining a Style.

Now the Question comes How to define Styles

Lets consider that you want common background on every window you create

Now lets create a window using that style

You don't need to mention background color on every window now. & changing the color at stylesheet level will reflect across every window which is inheriting this stylesheet.


Lets give some gradient effect & title to the Window

The same screen will now look like this.

Similarly you can set font size,font family for the entire application at single place & inherit across every where.You can set styles for all types of UI controls like labels,buttons, combo boxes etc