UWP Development, UWP Program Examples

UWP (Universal Windows Platform) is a platform for developing applications that can run on various Windows 10 devices. This allows developers to create apps that run on PCs, tablets, Xbox, IoT devices, and more. UWP is Microsoft’s new app model, providing a modern user interface (UI) and flexible application structure.

Setting Up the UWP Development Environment

To develop UWP applications, the following environment is required:

  • Windows 10 operating system
  • Visual Studio 2019 or later
  • Windows SDK

After installing Visual Studio, select the ‘UWP Development’ workload to install it.

UWP Application Structure

UWP applications are fundamentally composed of the following files:

  • App.xaml: Defines the application’s resources and startup page.
  • MainPage.xaml: The page where the user interface (UI) is defined.
  • Package.appxmanifest: A file that sets the application’s metadata and permissions.

Creating Your First UWP Application

Let’s create a simple UWP application following the steps below.

  1. Run Visual Studio and select ‘Create a New Project’.
  2. Select ‘Blank App’ from the UWP category, enter the project name, and click ‘Create’.

Code Structure

Once the project is created, the App.xaml and MainPage.xaml files will be generated. Below is an example of MainPage.xaml:


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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textBlock" Text="Hello, UWP!" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="Click Me" Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,50,0,0"/>
    </Grid>
</Page>

In the code above, we added simple text and a button. Now, let’s handle the button click event in the MainPage.xaml.cs file.


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            textBlock.Text = "Button has been clicked!";
        }
    }
}

Data Binding in UWP

In UWP applications, data binding can be implemented through the MVVM (Model-View-ViewModel) pattern. Data binding automatically maintains the connection between UI elements and data models. The example below introduces data binding using XAML and C#.

Creating the Model


public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Creating the ViewModel


using System.ComponentModel;

public class PersonViewModel : INotifyPropertyChanged
{
    private Person person;

    public PersonViewModel()
    {
        person = new Person() { Name = "John Doe", Age = 30 };
    }

    public string Name
    {
        get => person.Name;
        set
        {
            person.Name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public int Age
    {
        get => person.Age;
        set
        {
            person.Age = value;
            OnPropertyChanged(nameof(Age));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

Applying Binding in XAML


<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace">

    <Grid>
        <TextBlock Text="{Binding Name}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBox Text="{Binding Age, Mode=TwoWay}" Width="200" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    </Grid>
</Page>

The above code binds the Name property directly to the text block and binds the Age property to the text box in a two-way fashion. By setting the ViewModel as the data context of the page, the UI will be automatically updated with the data.

Deploying UWP Apps

There are several ways to deploy UWP applications:

  • Windows Store: You can submit the app to the Microsoft Store for a wider audience.
  • Direct Deployment: You can create an .appx package and distribute it directly to users.
  • Local Testing: You can run the app in a development environment.

Conclusion

UWP development is a great way to create flexible and intuitive applications that can run on various Windows devices. Through this tutorial, you have learned the basics of UWP development and hopefully created a simple application. You can learn more in-depth content through the official documentation or various communities.

References