# 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:
{% code overflow="wrap" %}
```xml
```
{% endcode %}
* Model provides Data Classes, for example, the `Person` class:
```csharp
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:
{% code overflow="wrap" %}
```csharp
public partial class PersonViewModel : ObservableObject
{
private ObservableCollection persons;
public RelayCommand AddItem { get; set; }
public ObservableCollection 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);
}
}
```
{% endcode %}
* 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:
```xml
```
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:
```csharp
dataGridView1.DataSource = viewModel.Persons;
```
The `DataSource` property of the DataGrid control is bound to the `Persons` property (data type: `ObservableCollection`\`) 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`):
{% code overflow="wrap" %}
```csharp
// 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);
}
```
{% endcode %}
* 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:
{% code overflow="wrap" %}
```csharp
// 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);
}
);
```
{% endcode %}
* 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://www.learnwisej.net/legacy-migration-with-wisej.net/hands-on-migrate-wpf-solutions-into-native-web-based-single-page-applications/wpf-migration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.