UWP (Universal Windows Platform) is a platform provided by Microsoft that allows developers to create apps that run on Windows 10 and later versions. With UWP, you can create applications that can run on various devices such as PCs, tablets, phones, and Xbox. In this article, we will take a closer look at how to create a UWP project.
1. Preparing the Environment for Creating UWP Projects
To start UWP development, you need Visual Studio. Visual Studio is an integrated development environment (IDE) provided by Microsoft, which is a tool for developing various applications, including UWP. Let’s follow the steps below to install and set up Visual Studio.
1.1 Installing Visual Studio
- Visit Microsoft’s official download page.
- Select and download the Community version or your desired version.
- Run the downloaded installer and choose the ‘Universal Windows Platform development’ workload in the ‘Development tools’ section for UWP development.
- Once the installation is complete, launch Visual Studio.
2. Creating a New UWP Project
The process of creating a new UWP project in Visual Studio is very simple. Let’s follow the steps below to create a new project.
2.1 Creating a New Project
- After launching Visual Studio, click “File” in the menu and select “New”.
- Select “Project”.
- When the “New Project” dialog opens, choose “C#” or “Visual Basic” in the left panel.
- In the central panel, select “Universal” and then choose “Blank App”. For this example, we will select “Blank App (Universal Windows)”.
- Set the project name and location, then click the “Create” button.
2.2 Setting the Target Version and Minimum Version
Once the project is created, you will configure the target version and minimum version settings. Here, ‘Target Version’ refers to the highest Windows 10 version on which the app will run, and ‘Minimum Version’ refers to the lowest Windows 10 version on which the app can run. This determines what features can be accessed on the user’s system.
- Select the target version. It is generally recommended to choose the latest version.
- Select the minimum version based on the range you want to support. Usually, a similar latest version is chosen.
- Once the settings are done, click the “OK” button.
3. Understanding the Structure of a UWP Application
Once a UWP project is created, various files and folders will be generated within Visual Studio. The structure is as follows:
- Properties: Files that set the properties of the project. Here you can set the app’s name, version information, icon, etc.
- MainPage.xaml: A file that defines the main user interface (UI) of the UWP app. UI can be declaratively designed based on XAML (Extensible Application Markup Language).
- App.xaml: A file that defines the global resources and settings of the app.
- App.xaml.cs: Contains the business logic of the app. It handles the implementation of the Application class.
- Assets: A folder that contains resources such as images and icons to be used in the application.
4. Creating a Hello World Example
Now that we understand the basic structure of a UWP project, let’s create a simple “Hello World” example. This example is a basic app that displays the text ‘Hello World’ when the user clicks a button.
4.1 Designing the UI
We will open the ‘MainPage.xaml’ file to design the UI. Here we will add a button and a text block.
<Page
x:Class="HelloWorldApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorldApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="HelloTextBlock" Text="Welcome!" FontSize="36" Margin="0,0,0,20"/>
<Button Content="Click Me!" Click="Button_Click" Width="200" Height="60"/>
</StackPanel>
</Grid>
</Page>4.2 Implementing the Code Behind
Now we will open the ‘MainPage.xaml.cs’ file to implement the button click event.
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace HelloWorldApp
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
HelloTextBlock.Text = "Hello World!";
}
}
}5. Running the Application
With all the coding completed, let’s run the application. Press Ctrl + F5 to run, and you will see the text ‘Hello World!’ appear when the ‘Click Me!’ button is clicked.
6. Deploying the UWP App
There are several ways to deploy a UWP application. The most common method is deployment to the Microsoft Store. Let’s look at the deployment process.
6.1 Packaging
- Select the “Build” menu in Visual Studio and click “Package” to start the packaging process.
- Select “Publish” on the right, then select “Create App Packages”.
- When the app package generation wizard starts, select the option “I will build the application for the Store”. This creates a store-specific package.
- Follow the subsequent steps to enter app information and generate the final package.
6.2 Submitting to Microsoft Store
After generating the package, you can log in to Microsoft’s developer dashboard to submit the app. The app submission process is as follows.
- Log in to Microsoft’s Developer Dashboard.
- Register a new app and enter the required information.
- Upload the package and request an app review.
7. Conclusion
In this article, we learned about the method of creating projects using UWP. The UWP platform provides powerful features and compatibility across various devices, enabling the development of applications that can be used across multiple environments with a single codebase. Through the “Hello World” project described above, you can understand the basics of UWP and lay the groundwork for creating more complex applications.
We hope you will learn more about UWP features and advanced programming techniques in the future. If you are ready to step into the fascinating world of UWP development, let’s move on to the next steps!