How to create an Installer for a Winforms application using Visual Studio 2022 Installer project
Tags: dotnet, csharp, programming, learning
Published: 2024-03-25 07:27:17

In this tutorial, we’ll look at creating an installer for a Winforms desktop application using Visual Studio 2022 that we can share with people.

**Prerequisites:**
The only prerequisite for this tutorial is Visual Studio Community edition, go ahead and download the installer [here](https://visualstudio.microsoft.com/downloads/) 

After downloading, go ahead and open Visual Studio.

Next, we want to create a project, we will create a small Winforms application for this demo.
Click on Create a new project and search for Winforms App with C#

![Search Winforms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4v7qnv13b4o2krmti0j.png)

Give your project a name, I have called mine **SetupInstallerTutorial**


![Name project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo81zrqosfte2i10wcyq.png)

Choose .NET 8 as your Framework and click on Create.

Your project is created. It might take some time for your designer to be loading so be patient. 

While we wait for the designer to finish setting up, let’s go ahead and install the extension we’ll use to setup our installer. Go ahead and click extensions and then click *Manage extensions*
Search for installer projects, You will see **Microsoft Visual Studio Installer project**, click download

![Install Setup extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o16rwt4yjjxgym8xkfyu.png)

After downloading, Close your Visual Studio instance.
The VSIX installer comes up, go ahead and click modify

![VSIX installer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny2keosoffcslpx99goo.png)

After the modification is done, go ahead and reopen your project again in Visual Studio. The extension should be added to your installed extensions.

Our Winforms app has also finished loading, so your project should look something like this.

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sj8enqydwajknl6hej1.png)

Now, let’s make a small adjustment to our app, so it at least does something.
Click on the toolbox to the left

![Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a49i57ro20rhurst81w1.png)

You will see a list of components, go ahead and drag a label and a button onto your form designer

![Label and Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb7yy1adgok8n4jarptd.png)

Your form designer should look like this after.

![Project overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzilikgzpvum36woka00.png)

Great now, we just want to change a few things. We want to make it so that when we click on the button the label displays some text. So go ahead and double-click on the button.
After clicking, a method called *button1_Click* is generated. Add this code inside it like so;

![Button modification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65gz1vfrlti45vivyxz3.png)

Great, so if you run your application now using fn + f5 and click on *button1*, your text appears. 

Okay, our application is complete, let's create an installer for it.
Before we do that, we will change our configuration to **Release** since we are configuring an application we want to share/ release to outsiders.

![Release configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjbggxai4uk59w70f5wr.png)

Alright so, right click on your solution in the solution explorer, click on add, and then click Add new project

![Add new Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/womhdbnmf05wsx16ilyg.png)

In the Add project modal, we will see a list of new projects that have been installed. Go ahead and click **Setup project**

![Add SetUp project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvmkzra7l0qc4js8x51z.png)
Give your project a name, I have called mine **SetupInstaller** and click Create.

![Setup Project created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydc2olq5o1g2e5dn5hfn.png)

Great, a new interface was generated with a couple of folders, let's run through them;

* Application folder: This is where your application’s libraries are going to be stored.
* User’s Desktop: This is the folder we can define if we want to add a shortcut of our application to the desktop.
* User’s Program menu: This is inside our program files in our C drive.
Let’s begin, click on the Application folder on the left
![Application folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3atn8c2e6pq2iawnttu.png) 

Next, right-click on the right pane, and click add, then click project output

![Project Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze3tbau8rma9wzf2yz4b.png)

We will see an Add project output modal, select publish items, then make sure Configuration is set to active and click Ok.

![Add project output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2asconh8zq6ld1lovuq9.png)
After clicking Okay, we see our publish item has been added to our output along with a properties pane.

![Added publish items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3tkex57ttd530qw54xp.png)

Next, we want to create a shortcut for our application, so right-click on the Publish item we just created and click on Create shortcut for publish item

![Add shortcut for application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcxdoqlrltanmmhl1bu6.png)

After the shortcut is created, go ahead and rename it, I have called mine *SetupTutorial*

![Rename Shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43ysxjjmxmtkyp1fv2yu.png)

Now, we need to add an icon for our application, you can add any icon you like but I am using a tools picture icon from [here](https://icon-icons.com/) 

Next, right-click your right pane again, click on Add, and click on file, then add the file you want.

![Add Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x585yllh59xbb7ogutg7.png)

After adding your icon, 

![Icon added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/376qucrtrhdr1b2gql69.png)
Next, to add your icon to your project shortcut, right-click on your shortcut and click the properties window

![Add icon to shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8rlwir5r8acc0t9j8t8.png)

Then in the properties window, click on the drop-down for icon and click browse

![Click Icon in dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhrle8b6juv5sucw93lm.png)

When the icon modal comes up, click on browse
Next double click your applications folder

![Click applications folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvvwhout5nxzvnnaeffs.png)

Then click on the icon you added to your application folder and click ok

![Select Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9skuheedwoehnu7wee1.png)

Next, we want to add our shortcut to our desktop, right click on the shortcut, click cut 

![Cut shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/198ix8ipzbpill66eclg.png)

Then click on the User’s Desktop folder and paste it there

![Paste in desktop folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsrqfycvdulpnw96wv9n.png)

To add your shortcut to the User’s programs menu, simply create the shortcut again in the Application folder and follow all the steps, but this time, paste the shortcut you cut in the User’s program menu.

Next, we want to change the Author and manufacturer of our application, so click on the setup project, click on properties  then change the author and manufacturer from HP to your name

![Change Author and Manufacturer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00nkss1z5wdcqzrevnpd.png)

*NB: The project structure of your setup project must mirror the project structure of your actual application, in terms of placement of folders and naming.*

Now, our setup project is ready, right click on your Setup project and click build.

![Build project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n96du1lee2v28f3oxm1.png)

After successfully building right-click on your setup project and click Open folder in File Explorer

![Open file explorer of setup project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a8jp26kto352m7p5lhg.png)

The File Explorer opens showing 2 folders Debug and Release

![Debug and Release](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo0r1nv3jc8gfeqqmaly.png)

Since we configured our setup project to be built under release, our installer will be inside the release folder, so click on that.

![Installer has been configure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axlbhyeb9w9tnace8310.png)

And that’s it. Our installer for our application has been built, you can go ahead and run either file to install your WinForms application.

The source code for this tutorial can be found [here](https://github.com/bigboybamo/SetupInstallerTutorial)

Happy coding everyone.