1. Find any photo that you like, the format of it shouldnt matter. Formats such as .

png or
.jpg are most likely supported.
2. New Project -> WPF application, any name and any location should do as long as its on
myTemp
3. Choose your project under the solution, right-click it, open last item on the list:
properties , theres a list of tabs on the left in the window that just opened. Choose
resources.
4. Find, but dont click Add Resource . Theres a small dropdown arrow next to Add
resource click that to open the dropdown menu. Navigate to the photo you downloaded
and select it.
5. In your solution explorer to the right of the window, a new folder named Resources
should have appeared, containing your images.
6. Select your image in the resources folder and look into its properties window at the
bottom right of your screen. Under Advanced, set Build Action to Resource.
7. You should have two tabs open: MainWindow.xaml and MainWindow.xaml.cs.
Make sure you are in the xaml window and not the .cs window. We are working
with visual interface right now.
8. Have your main window selected. Open the toolbox from the tab on the left.
9. Find a component named Image and drag it to the main window.
10. Select the Image -component and look at its properties window.
11. In the common -category, opening the dropdown menu should allow you to see your
imported image which is located in the resources folder. Select it.
12. Below the blue properties bar at the top of the window we are in now, on the right side
and beneath of it, theres a wrench symbol representing properties and a lightning
symbol representing event handlers. Click the lightning symbol to switch over to event
handlers from properties.
13. You should have opened a long list of event handlers. Scroll down until you find
MouseEnter and MouseLeave.
14. Double click the empty gray field next to MouseEnter. Visual Studio brings you over to
the .cs window to show you that it has automatically added the code snippet template
to our C# code. You can click the MainWindow.xaml to switch back to the previous
tab.
15. Double click the empty gray field next to MouseLeave.
16. You should have been moved to the C# window containing our source code. Here we
will begin writing the functionality of our mouse-over controlled fade-in and fade-out
events.
17. If you are confused when you should start a new line, a ; in the code signifies the end
of a line.
18. At the very top, theres a list of using System items. We will have to add a new one.
19. At the end of the list add: using.System.Windows.Media.Animation;
20. Then, inside image_MouseEnter program, our first line will be:
Image img = (Image)sender;
21. The next line: DoubleAnimation anim = new
DoubleAnimation(1,TimeSpan.FromSeconds(1));
22. The last line from this program is img.BeginAnimation(Image.OpacityProperty, anim);
23. Now copy the three lines of code exactly as they are into the image_MouseLeave
program, but change the 1 before the timespan into a 0. The purpose of this is to change
the opacity into 0 over a time of one second, whereas in the other event, we changed
the opacity to 1 over a time of one second.