× Main Menu

WPF C# Tutorial – Make a simple image gallery in visual studio

In this tutorial we will show you how to make a simple image gallery in visual studio with C# and WPF. This app is designed to show you how to import images into WPF, how to access them and how to present them in the form so it shows up on run time. Some people had problems where the images shows up during the design view but does not show up on runtime, these issues can be frustrating for beginners because we just want to make something work and then check how it worked right, so with this tutorial we will show you how to make simple image gallery in WPF and C#. You can download the images that we are using with this project and use in your own, also you can get your own images if you want to.

Lesson objective –

  1. Make a simple slide show image gallery in visual studio with WPF and C#.
  2. Using GRID display in XAML to make this app
  3. Use XAML code to insert necessary tags to make this app work
  4. Use C# code to program events with buttons
  5. Using button events to change the pictures inside of WPF C#
  6. Import images to the project solutions the right way so they show up on runtime.
  7. Debug and test the program

To start, lets make a new project in visual studio. Under the C# WPF name the project image gallery and press OK.

Lets download the images we need for this project and import them to the project solutions.

Download the images here.

These are the six cute kitten images we are going to use. If you notice, we have named them 1-6 and they are all JPG files. This part is important because want to be able to load JPG files with the program and change the values through C# script later.

First right click on the image gallery name inside the solutions explorer, hover over the add option and click on the folder. We will need to add a folder so we can import our images into it.

Now name the folder “pics” and press enter.

Above you can see that we have made the pics folder.

Now right click on the folder, hover over the add option and click on the existing item option.

Now navigate to where the images are saved, select all files from the file type option in the browser. Select all of the images and click ADD.

Now they are all imported to the project. It is possible for us to access these files in the design and the runtime views. Lets get started with coding. Go to the second page to start with coding for this app.

Comment on this tutorial and let us know how you got on -

%d bloggers like this: