Now everyone enjoys looking at pictures and reminiscing over good times; myself included however when browsing through My Pictures I thought there has to be a better and more interactive way to do this. This occurred quite luckily around the same time I’ve been working on a project using the 3D abilities of WPF, and so it occurred to me; a 3D method of viewing your images while also discussing what it’s like to develop software at Microsoft. So now, let’s get stuck in and make something amazing…
Now the first thing you will need to do is create a new WPF application that we can build from; for this project I called it StudentZine_Helix, you will instantly notice that building a WPF application is quite different from the old WinForms method of building an application. Firstly there is something called Xaml which you can use to construct the user interface and possibly the entire application however for this project we will still mainly need to stick with code.
When we write code here at good old Microsoft, we tend to have an end goal in mind, a set of requirements and repeated testing to eliminate bugs… so quite different to thinking ‘I want to make something shiny’ and writing the code for the final app of this series over my lunch break. Normally we also work in teams so we can gain feedback and reflect off the skills and resources of others.
When you first make a WPF application you will be greeted by the xaml editor and design view, to start off with its a boring white window so let’s make it larger and also a different colour. To do this we need to alter the xaml attributes for the windows Title, Height, Width and add the Background property, the attribute properties I used were the following:
Don’t worry if you need to make the window smaller, everything scales nicely.
In order to view all the images in the My Pictures folder we will first need to get a list of all the files. We can do this by using DirectoryInfo to return a list of all the files in the folder; however, we’ll then need to strip away all the ones that are not valid image types, thus leaving us with a usable list of filenames.
So now, go into the C# code view and at the top of the code declare the namespace:
Then in the window’s class, declare a list of strings that will represent the image file extensions we will allow to be loaded in the application:
I have already populated with three of the most common image formats to use however, you can add or remove them depending on what you want. Now at the same time declare another list of strings for the final list of filenames:
In the code for the function to retrieve the filenames we firstly use DirectoryInfo to get information about the directory from which we can extract the list of files, we use System.Environment.GetFolderPath(System.Environment.SpecialFolder.MyPictures) to return the path of the My Pictures folder as it always returns the path of the current user. Using the .GetFiles(“*”, SearchOption.AllDirectories); method we can return all the files in the directory as all subdirectories; kindly meaning we don’t have to implement a search algorithm ourselves. Finally, we go through each FileInfo and store only the filenames of the correct extension. Below is the source code for the implemented function.
For the moment, let’s just render the first image in the filelist to the screen with a nice border so you can see the code in action.
Now back to the C#, we have to create a function to load an image and display it onto the image control we just created, it may seem a bit lacking at the moment but we’ll add to it in a bit.
To wrap this all together by calling these functions when the application loads, so in the class constructor place after InitializeComponent() place the following code.
To use animations in WPF you’ll first have to add the following namespace to the project: We can implement the animation in either xaml or in the code but for this article I’ll show you how to implement it in code. So going back to the last function you just wrote add the following code to the end of it.
The observant of you may notice that’s not 3D or a helix; this week we were laying the groundwork so tune in next time for when I’ll show you how to do 3D effects in WPF.