Hello! In this series, we will introduce how to create a UWP (Universal Windows Platform) desktop application using C# step by step. This series is a guide for those who are not familiar with C# or desktop app development, starting with the process of creating a basic app and gradually implementing more complex features.
In the first article, we will set up the UWP app development environment and create the simplest app, "Hello World!". Through this process, you will be able to grasp the basic structure of C# and UWP projects.
1. Introduction to UWP and C#
UWP is an app development platform provided by Microsoft that allows you to create applications that run on various devices (PCs, tablets, Xbox, etc.) running Windows 10 or later. This enables you to develop apps that work in multiple environments with a single codebase. C# is the most widely used programming language on the .NET platform, featuring powerful functionality and simple syntax.
In this series, we will learn how to implement UI and functionality using C# and XAML (the markup language used in UWP).
2. Setting up the Development Environment
First, you need to install the necessary tools for developing UWP apps. Visual Studio is the ideal IDE (Integrated Development Environment) for UWP app development, and you can install the free version, Visual Studio Community.
1) Install Visual Studio
1.
2.
Download and install “Visual Studio Community”.
3.
During the installation, select the Universal Windows Platform development workload.
4.
Install the latest versions of Windows 10 SDK and .NET.
2) Enable developer mode
To test UWP apps, you need to enable developer mode on Windows 10.
1.
Go to Settings > Update & Security > Developer.
2.
Enable developer mode.
3. Creating a new UWP Project
Let's create our first UWP project in Visual Studio.
1) Create a new project
1.
Run Visual Studio and select Create a new project.
2.
Search for Universal Windows Platform and select the Blank App (Universal Windows) template.
3.
Set the project name and path, then click Create.
4.
In the target and minimum version selection screen, choose Windows 10 (latest version).
2) Understanding the project structure
A UWP project is made up of multiple folders and files. The main files and folders are as follows:
•
MainPage.xaml: The file that defines the basic screen of the app.
•
App.xaml: File that manages the global settings and resources of the app.
•
Package.appxmanifest: File that sets the app's metadata (name, icon, permissions, etc.)
4. Implementing “Hello World!”
Next, let's try outputting the simplest function, “Hello World!”, to the screen.
1) Creating the UI with XAML
Open the MainPage.xaml file and add the following code to output text to the screen.
<Page
x:Class="PhotoBooth.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoBooth"
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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30">
Hello World!
</TextBlock>
</Grid>
</Page>
XML
복사
The code above displays simple text in the center of the screen. The TextBlock tag is a UI element that outputs text.
2) Executing the code
After writing the code, press Debug > Start Debugging (F5) to run the app. When the app is running, you should see a screen with the text “Hello World!” in the center.
5. Summary
You have now completed your first UWP app! In this article, we looked at how to set up the development environment to create a UWP app and output a simple UI. In the next article, we will add a camera preview function and take photos, so let's continue!
Through this series, you will be able to understand the basic concepts of C# and UWP, and have the opportunity to try making an actual app.
Next time:
Creating a UWP desktop app in C# 2/5: Implementing camera preview
Read in other languages:
Support the Author:
If you enjoy my article, consider supporting me with a coffee!