My Pictures 3D Helix using WPF (Part 1 of 3)

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...

So first of all I should mention that I’ll be using the combination of C# and WPF to create this application, if you’ve never coded in C# then now is a good time to learn and I’ll try my best to make what I do as easy to understand as possible. Therefore, head over to http://www.microsoft.com/express/download/ and grab yourself a copy of Visual C# Express Edition that is entirely free to use.

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.

To make the border and the image we need to add a few UIElement’s to the Grid control that’s declared by default in the xaml file, go back into the xaml file and between the Grid declarations paste the following code:

The first part declares a border control, we give it a margin around it of 20 pixels on each side and the border itself is white and 10 pixels on each side. We set the vertical and horizontal alignment to center so it automatically resizes depending on the size of the picture. Finally we set the Opacity of the border to 0 so it’s transparent to begin with so we can add a cool fade in effect later. Inside the border, we declare an image but we don’t set the source image just yet.
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.

Now when you run the program you will see... nothing, that’s because the border we declared earlier has an opacity of 0 so we can’t see it. Guess we should add in a fade in effect.
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.

So now, finally when you run the application you will see it nicely fade in an image.

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.