WPF Migration

Wisej.NET allows nearly automated migration of WinForms applications. However, migrating WPF applications requires a bit more effort. Wisej.NET replicates the standard UI controls of WinForms almost 1:1 as JavaScript controls. Properties, behavior, and events are also identical. That is why the migration effort is significantly reduced. For WPF applications the UI is declaratively created using XAML code. It must be recreated for migration to a Web application. An appropriate alternative in the form of a Wisej.NET control must be identified for each UI control from the WPF application. User interface creation can be facilitated by using the graphical designer in Visual Studio.

Wisej.NET offers a data binding option for each UI element. This feature is used to maintain the architecture based on the MVVM concept. The implementation of data binding is shifted from the XAML code (View) to the C# code (View) of the web app. The other layers of the application (ViewModel, Model) can be adopted without changes. Table 2 lists the steps for migrating a WPF application to a Wisej.NET-based web application.

Table 2: Adaptation steps for migrating a WPF application to a web application.

Measure	Description
Analysis of existing UI	Identification of the XAML controls used and their properties.
Mapping of UI Controls	Assignment of WPF controls to Wisej.NET controls. Layout and UI design can be done using the graphical designer and layout containers.
Adjustment of Data Binding	Shifting data binding from XAML code to C# code. Commands from the ViewModel are bound in the C# code of the code-behind file.
Adoption of Model Layer	Unchanged adoption of existing Model files.
Implementation of new View	Creating the user interface in Wisej.NET using the Visual Studio designer.

Example

The starting point is a WPF application (Figure 2).

Figure 2: WPF application to be migrated.

Let's analyze the typical properties of this WPF application:

• Binding UI Elements (View) via DataContext property to the ViewModel, for example:

<DataGrid ItemsSource="{Binding Path=Persons, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"…/>

• Model provides Data Classes, for example, the Person class:

public class Person {
    public int Id { get; set; }
    public string Name { get; set; }
    public string FirstName { get; set; }
}

• ViewModel binds data to UI Elements of the View:

public partial class PersonViewModel : ObservableObject 
{
    private ObservableCollection<Person> persons;
    public RelayCommand AddItem { get; set; }

    public ObservableCollection<Person> Persons {
        get { return persons; }
        set {
            persons = value;
            OnPropertyChanged("Persons");
        }
    }

    public PersonViewModel() {
        AddItem = new RelayCommand(AddItemCommandExecute);
        ...
    }

    private void AddItemCommandExecute() {
        Person p = new Person() { Id = persons.Count, FirstName = "Ben", Name = "Müller" };
        Persons.Add(p);
    }
}

• The ViewModel implements the INotifyPropertyChanged interface.

• This synchronizes data between the View and the ViewModel automatically. The ObservableCollection data type is used for the data list (Persons), which automatically forwards changes to the View.

• User Actions (Button Click) are forwarded from the View to the ViewModel via Commands:

<Button
... Command="{Binding Path=AddItem}"/>

The web app was created using Wisej.NET. The ViewModel (PersonViewModel) and Model (Person) classes were adopted unchanged. The user interface was built with Wisej.NET UI controls, using the graphical designer of Visual Studio (Figure 3).

Figure 3: The migrated web application.

• Modern UI controls such as DataGrid were used. These UI controls are JavaScript controls that were adapted via CSS to modern themes such as Bootstrap or Material Design.

• Wisej.NET offers layout containers that enable responsive design of the web app. This ensures correct display on different screen sizes and resolutions.

• Data binding occurs in the code-behind files. Here, the properties of the UI elements are bound to the properties of the ViewModel. For example, the binding for the collection property looks like this:

dataGridView1.DataSource = viewModel.Persons;

The DataSource property of the DataGrid control is bound to the Persons property (data type: ObservableCollection<Person>`) in the ViewModel. This synchronizes data between the ViewModel and the View (DataGrid).

• In the ViewModel, the commands for user interactions were modified. In the WPF version of the application, there was, for example, the following typical source code for a command that adds an object of the Person class to the list of persons (Persons):

// Define command
public RelayCommand AddItem { get; set; }

// Initialize command in the class constructor
public PersonViewModel() {
    AddItem = new RelayCommand(AddItemCommandExecute);
    ...
}

// Execute method of the command
private void AddItemCommandExecute() {
    Person p = new Person() { Id = persons.Count, FirstName = "Ben", Name = "Müller" };
    Persons.Add(p);
}

• The RelayCommand class, for example, comes from an MVVM framework or is defined in a custom base class. This base class provides the functionality for a command. This source code needs to be adapted for the web version:

// Define command
public Command AddItemCommand { get; set; }

// Initialize command and assign execution method
AddItemCommand = new Command(
    execute: args => {
        Person p = new Person() { Id = persons.Count, FirstName = "Ben", Name = "Miller" };
        Persons.Add(p);
    }
);

• The new base class Command comes from the Wisej.NET framework. The command from the WPF application only needs to be adjusted concerning the data type. No further changes are necessary.

With these adjustments, a WPF desktop application can be technically migrated to a modern web application. The application's functions remain preserved.

Further adjustment needs

In addition to the mentioned measures, there are other important adjustments that need to be considered when migrating a WPF application to a web-based application. These include, for example:

• Adjustments and extensions of the application's functionality: For example, in the business logic.

• Elimination of errors adopted through automatic migration.

• Changes to access local hardware.

• Adjustments due to switching from single to multiuser operation.

• Implementation of responsive design principles: The layout and UI components dynamically adapt to the screen size and orientation.

• Implementation of security mechanisms: For example, measures like authentication and authorization.

These tasks are examples; Specific implementation needs will vary based on the project.