UWP Development, Basic Concepts

UWP (Universal Windows Platform) is a platform provided by Microsoft that supports the development of applications running on Windows 10 and later versions. UWP allows developers to create apps that are compatible and can run on a variety of devices, including PCs, tablets, Xbox, and Hololens. This article aims to explain the basic concepts of UWP development in detail and provide opportunities for hands-on practice through example code.

1. Basic Structure of UWP

UWP apps are fundamentally composed of several components, including the app’s UI, logic, and data storage. UWP projects can be easily created in Visual Studio, using XAML and C# primarily to structure the UI and implement functionality.

1.1. XAML and C#

XAML (Extensible Application Markup Language) is a markup language used to define the user interface of UWP apps. XAML allows UI elements to be defined declaratively, while C# handles business logic and event processing. Let’s explore how to define UI elements and handle events through a simple example. 

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Button Content="Click me" Click="Button_Click"></Button>
    </Grid>
</Page>
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Content that will run on button click
            Button button = sender as Button;
            button.Content = "Clicked!";
        }
    }
}

1.2. App Components

UWP apps consist of various components, which include the following:

  • Page: Defines each UI screen.
  • Control: Used as UI elements such as buttons and textboxes.
  • ViewModel: Applies the MVVM pattern to separate data and UI logic.
  • Model: A class that defines data.

2. Creating a UWP App Project

UWP app projects can be created using Visual Studio. Let’s follow the steps to create a UWP project:

  1. Run Visual Studio.
  2. Click on Create a new project.
  3. Select “C#” from the left panel and search for “UWP”.
  4. Select the “Blank App (Universal Windows)” template.
  5. Set the project name and location, then click the Create button.
  6. Set the target version and minimum version, then click the OK button.

3. Using Basic UI Elements

UWP provides a variety of UI elements. Various controls such as text, buttons, images, and list views are available. Below is an example of a simple UI. 

<Page x:Class="MyApp.MainPage" ...>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Welcome!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0"/>
        <TextBox x:Name="nameTextBox" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" PlaceholderText="Enter your name"/>
        <Button Content="Display Name" Click="DisplayName_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,20,0,0"/>
        <TextBlock x:Name="outputTextBlock" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,70,0,0"/>
    </Grid>
</Page>
private void DisplayName_Click(object sender, RoutedEventArgs e)
{
    outputTextBlock.Text = "Hello, " + nameTextBox.Text + "!";
}

4. Data Binding

The MVVM (Model-View-ViewModel) pattern is a very suitable architecture for UWP development. Using this pattern allows for the separation of UI and business logic, improving maintainability and scalability. Data binding enables automatic updates to the UI when the property values in the ViewModel change. Below is an example of using data binding. 

public class MainViewModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

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

5. Key Features of UWP

UWP offers a variety of features, allowing developers to maximize app performance. Key features include:

  • Live Tiles: Provides tiles on the start screen that update in real-time.
  • Notification: Allows information to be conveyed to users through push notifications.
  • Background Tasks: Supports running tasks in the background.
  • Data Storage: Manages the app’s state through local data storage.

6. Evolution and Future of UWP

UWP has been continuously evolving since the release of Windows 10, and Microsoft continues to provide new features and tools for app developers. This evolution helps developers efficiently create apps that run across various devices.

Moreover, Microsoft is extending the capabilities of UWP with new frameworks such as .NET MAUI (Multi-platform App UI). These changes will provide developers with more choices and enhanced user experiences.

Conclusion

UWP is a powerful platform that runs on various Windows devices, helping developers easily create cross-platform applications. In this article, we explored the basic concepts and structures of UWP along with simple examples for hands-on practice. By leveraging UWP, the initial development of Windows apps will be much simpler, and we will pay attention to future changes and advancements.

If you wish to learn more about UWP development, please refer to Microsoft’s official documentation and various online educational resources. Dive into the world of app development and create amazing projects!