UWP Development, Developing UWP MVVM Apps

In recent years, cross-platform development has become increasingly important alongside various platforms, and UWP (Universal Windows Platform) development is gaining attention. UWP is a platform for developing apps that run on Windows 10 and later versions, providing advanced APIs and tools to help developers deliver better user experiences. In this article, we will detail how to develop apps using the UWP MVVM pattern and clarify concepts through example code.

UWP and MVVM Pattern

The MVVM (Model-View-ViewModel) pattern is a design pattern used to separate the UI and business logic, making it very useful in UWP app development. Let’s look at each component of the MVVM pattern:

Model: Includes data and business logic. This is where interactions with the database and API calls usually take place.
View: Refers to the UI that is displayed to the user. The UI is defined using XAML.
ViewModel: Acts as a mediator between the view and the model. It communicates the model’s data to the view through data binding and passes user input from the view to the model.

Advantages of UWP MVVM Architecture

Maintainability: The separation of UI and logic makes it easier to maintain the code.
Testability: The ViewModel can be tested, making unit testing easier.
Reusability: Components of ViewModel and Model can be reused.

Preparing to Develop UWP MVVM Apps

To develop UWP MVVM apps, you need to install Visual Studio. It is also recommended to use the latest version of Visual Studio that includes the SDK for UWP development.

Once Visual Studio installation is complete, follow these steps to create a new UWP project:

Launch Visual Studio.
From the File menu, select ‘New’ > ‘Project’.
Select UWP and choose ‘Blank App (UWP)’, then specify the project name.

Creating the MVVM Structure

After the project is created, you will set up the MVVM structure. First, create the following folder structure:

/MyUwpApp
|--- /Models
|--- /ViewModels
|--- /Views

Defining the Model

The model contains the data structures and business logic that the app will use. Let’s create a simple ‘Person’ model.

namespace MyUwpApp.Models
{
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

Defining the ViewModel

The ViewModel acts as a connector between the model and the view. Create a ‘MainViewModel’ to manage the list of people to be displayed in the user interface.

using System.Collections.ObjectModel;
using System.ComponentModel;
using MyUwpApp.Models;

namespace MyUwpApp.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<Person> _people;
        public ObservableCollection<Person> People
        {
            get { return _people; }
            set 
            {
                _people = value;
                OnPropertyChanged(nameof(People));
            }
        }

        public MainViewModel()
        {
            People = new ObservableCollection<Person>
            {
                new Person { Name = "John Doe", Age = 30 },
                new Person { Name = "Admiral Yi Sun-sin", Age = 40 }
            };
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Defining the View

In UWP, XAML is primarily used to define the user interface. Modify MainPage.xaml to connect it to the ViewModel.

Running the App

Now that everything is ready, let’s run the app. Click the run button in Visual Studio to execute the app locally. A list of people should be displayed, along with each person’s name and age.

Conclusion

In this article, we explored the basics of UWP app development and how to use the MVVM design pattern, along with a simple example code to build a real application. Using the MVVM pattern enables easier code maintenance and increases testability. There are many features that can be implemented with UWP, so continue to learn and evolve.