Create Setup and Deployment of WPF Application Step by Step

Introduction

In this article we will see how we can create a Setup and Deployment of WPF Application. I would guide you step by step so that you don't miss anything.

Crating WPF Application Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as MyApplication.

WPFApplication1.gif

We would add another WPF User Control Library so that you get the complexity of more than one project and their dependencies. So add a New Project to the Solution and name it as WPFHelper.

WPFApplication2.gif

Let's make this simple. When you add a WPF User Control Library it comes with a UserControl1.xaml, delete the file and add a class and name it as Employee.cs

WPFApplication3.gif

Have the following structure for simplicity.

namespace WPFHelper

    public class Employee
    {
        public string Name { get; set; }
    }
}

Now your Solution structure would look like as follows:

WPFApplication4.gif

Now add reference of this WPFHelper to MyApplication.

WPFApplication5.gif

Now go back to our main application "MyApplication" and and some controls so that it would have dependecies on the Assembly of WPFHelper project.

Now I have added a ComboBox that would contain the Employee names.

WPFApplication6.gif

Write the below code to bind to some sample data.

XAML

<Window x:Class="MyApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPFHelper;assembly=WPFHelper"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ComboBox x:Name="cmbEmployeeNames" Height="23" Margin="21,29,98,0" VerticalAlignment="Top" ItemsSource="{Binding}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

C#

public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            List<Employee> myList = new List<Employee>
            {
                new Employee{ Name="Some 1"},
                new Employee{ Name="Some 2"},
                new Employee{ Name="Some 3"},
                new Employee{ Name="Some 4"},
                new Employee{ Name="Some 5"}
            };

            cmbEmployeeNames.ItemsSource = myList;
        }
    }

Now run the application to test the application.

WPFApplication7.gif

Yes, we are going good.

Now comes the most important part where we would go step by step.

Step 1

Add a Setup and Deployment project to the Solution and name it as MyApplicationSetup.

WPFApplication8.gif

As soon as you add the project it opens the File Explorer view.

WPFApplication9.gif

The solution structure would be like as follows:

WPFApplication10.gif

In the left pane you see the System Folders and the right pane is for the content of the Folder.

If you see above we have 3 System Folders. You can add other System Folders based on your requirement.

The following list is shown when you right click on the root and select Add Special Folder.

WPFApplication11.gif

Step 2

We would add Program File's Folder to our Setup project.

WPFApplication12.gif

Here is the way how you should add contents to the folders.

  1. Application Folder

    a. It should contain the Primary output and the dependencies.
     
  2. Program Files Folder

    a. It should contain the Folder where your Primary output would be copied while installation and the necessary files [Resource file such as icons, config, etc..].
     
  3. User's Desktop

    a. It should contain the Shortcut of your application
     
  4. User's Program Menu

    a. It should contain the Shortcut of your application.

Step 3

Now we would add Primary output and other dependencies to Application Folder.

WPFApplication13.gif

Select as displayed above.

WPFApplication14.gif

You would see the projects available in the solution to add. As MyApplication is the Startup Project select it and press OK. You would see the change in the folder as follows.

WPFApplication15.gif

Step 4

Now we would add A folder to the Program Files Folder.

WPFApplication16.gif

Step 5

Name the folder as My Application.

WPFApplication17.gif

Step 6

Now add the same as you did for the Application Folder.

WPFApplication18.gif

But you would see the dependecy DLL are not added. Here you can add required files for the Application to run such as Icons and all.

Step 7

Now we would add a Shortcut to User's Desktop.

Here is the Trick go to your Application folder and Create a shortcut of your Primary output and rename it as required. And then move the file from there to User's Desktop. The following screens would help you doing this.

WPFApplication19.gif

WPFApplication20.gif

WPFApplication21.gif

Step 8

Now do the same procedure as above for User's Program Menu. As it requires the same.

We have to do a last round of work for all the folders and files we have added. That is a property called AlwaysCreate to True. By default it is False.

WPFApplication22.gif

Step 9

Change all folders and files setting as AlwaysCreate = True.

Changing the Default Location of Application Folder.

By default it is: [ProgramFilesFolder][Manufacturer]\[ProductName]

If you don't want to change it's fine. But if you give [Manufacture] in the attribute then it would create folder as Microsoft in Program Files and then your folder.

I prefer to remove the attribute so that your application would be directly under Program Files.

Change the Default Location to [ProgramFilesFolder] \[ProductName]

Now our Setup project is ready. Rebuild the Solution and then rebuild the Setup project.

Go to the Debug directory of the Setup project. There you would find your setup files as .msi and .exe

WPFApplication23.gif

The first one is for distribution.

That's it you have successfully created a Setup for your WPF application.

Hope this article helps.