Category: UWP Programming

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

1. Visit Microsoft’s official download page.
2. Select and download the Community version or your desired version.
3. Run the downloaded installer and choose the ‘Universal Windows Platform development’ workload in the ‘Development tools’ section for UWP development.
4. 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

1. After launching Visual Studio, click “File” in the menu and select “New”.
2. Select “Project”.
3. When the “New Project” dialog opens, choose “C#” or “Visual Basic” in the left panel.
4. In the central panel, select “Universal” and then choose “Blank App”. For this example, we will select “Blank App (Universal Windows)”.
5. 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.

1. Select the target version. It is generally recommended to choose the latest version.
2. Select the minimum version based on the range you want to support. Usually, a similar latest version is chosen.
3. 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

1. Select the “Build” menu in Visual Studio and click “Package” to start the packaging process.
2. Select “Publish” on the right, then select “Create App Packages”.
3. When the app package generation wizard starts, select the option “I will build the application for the Store”. This creates a store-specific package.
4. 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.

1. Log in to Microsoft’s Developer Dashboard.
2. Register a new app and enter the required information.
3. 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!

UWP Development: Pointer Input Events

Pointer input events are a very important concept in UWP (Universal Windows Platform) development. Since UWP apps support various input methods such as touch, mouse, and stylus, it is essential to learn how to effectively handle these inputs. In this article, we will explain the concept of pointer input events in detail and practice it through example code.

1. What are Pointer Input Events?

Pointer input events are events that occur when users interact with screen elements using a touchscreen or mouse pointer. These events allow us to capture and process user input. The main pointer input events used in the UWP platform include the following:

• PointerPressed: Occurs when the pointer is pressed.
• PointerMoved: Occurs when the pointer is moved.
• PointerReleased: Occurs when the pointer is released.
• PointerEntered: Occurs when the pointer enters the boundary of a UI element.
• PointerExited: Occurs when the pointer exits the boundary of a UI element.

2. Handling Pointer Events

To handle pointer events in UWP, you need to subscribe to the events on the UI elements and implement the corresponding event handlers. The following is a simple example where the color changes when a button is pressed using pointer input events.

2.1 XAML Code

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="MyButton" Content="Pointer Event Test" Width="200" Height="100"
                PointerPressed="MyButton_PointerPressed"
                PointerReleased="MyButton_PointerReleased"
                PointerEntered="MyButton_PointerEntered"
                PointerExited="MyButton_PointerExited"/>
    </Grid>
</Page>

2.2 C# Code

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;

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

        private void MyButton_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Red);
        }

        private void MyButton_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Green);
        }

        private void MyButton_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);
        }

        private void MyButton_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Transparent);
        }
    }
}

3. Characteristics of Pointer Events

Pointer input events have various characteristics. In this section, we will take a closer look at these characteristics.

3.1 Pointer Properties

Pointer events provide a PointerRoutedEventArgs object that includes various properties. This allows you to obtain information about the pointer’s state and position. For example:

• Position: You can get the current position of the pointer.
• PointerDeviceType: You can check the type of input device (mouse, touch, etc.).
• IsInContact: Indicates whether the touch input is currently on the screen.

3.2 Event Propagation

Understanding how events propagate in UWP is important. Pointer events follow the basic bubbling and capturing mechanisms. This means that events can propagate from the topmost element to the bottommost element or from the bottommost element to the topmost element.

4. Multi-Pointer Handling

UWP allows processing inputs from multiple pointers simultaneously. In this case, it is important to manage information for each pointer. The following is an example of handling multiple pointers.

4.1 XAML Code

<Page
    x:Class="YourNamespace.MultiPointerExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Canvas x:Name="DrawingCanvas" Background="Transparent"
                 PointerPressed="DrawingCanvas_PointerPressed"
                 PointerMoved="DrawingCanvas_PointerMoved"
                 PointerReleased="DrawingCanvas_PointerReleased"/>
    </Grid>
</Page>

4.2 C# Code

using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace YourNamespace
{
    public sealed partial class MultiPointerExample : Page
    {
        private Dictionary activePointers = new Dictionary();

        public MultiPointerExample()
        {
            this.InitializeComponent();
        }

        private void DrawingCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            uint pointerId = e.PointerDevice.PointerId;
            Point position = e.GetCurrentPoint(DrawingCanvas).Position;

            Ellipse ellipse = new Ellipse
            {
                Fill = new SolidColorBrush(Windows.UI.Colors.Blue),
                Width = 10,
                Height = 10
            };

            Canvas.SetLeft(ellipse, position.X);
            Canvas.SetTop(ellipse, position.Y);
            DrawingCanvas.Children.Add(ellipse);
            activePointers[pointerId] = ellipse;
        }

        private void DrawingCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            uint pointerId = e.PointerDevice.PointerId;
            if (activePointers.ContainsKey(pointerId))
            {
                Point position = e.GetCurrentPoint(DrawingCanvas).Position;
                
                Canvas.SetLeft(activePointers[pointerId], position.X);
                Canvas.SetTop(activePointers[pointerId], position.Y);
            }
        }

        private void DrawingCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            uint pointerId = e.PointerDevice.PointerId;
            if (activePointers.ContainsKey(pointerId))
            {
                DrawingCanvas.Children.Remove(activePointers[pointerId]);
                activePointers.Remove(pointerId);
            }
        }
    }
}

5. Conclusion

In UWP, pointer input events are a crucial factor determining the ability to handle user interactions. Through this article, I hope you have gained a better understanding of the basic concepts and handling methods of pointer events, as well as multi-pointer processing. Now, with practical experience, you should have the foundational knowledge to implement more complex input handling logic.

Additionally, I encourage you to practice various features related to this and the integration with UI elements to grow as a better UWP app developer.

The Universal Windows Platform (UWP) is a platform developed by Microsoft that provides a unified development environment for creating apps that operate on Windows 10 devices. UWP apps can run on various devices such as PCs, tablets, Xbox, and HoloLens. In this article, we will take a detailed look at keyboard input events in UWP development.

1. What are Keyboard Input Events?

Keyboard input events are mechanisms that detect and process what the user inputs through the keyboard. In UWP, each key input is handled as events such as KeyDown, KeyUp, and KeyPress. These events allow you to check whether a key has been pressed or released, and to define actions for specific key inputs.

2. Handling Keyboard Events in UWP

In UWP apps, there are two main events that can be used to handle keyboard events: the KeyDown event and the KeyUp event. The KeyDown event occurs when a key is pressed, while the KeyUp event occurs when a key is released. Through these events, specific actions of the program can be performed.

2.1 Setting Up Keyboard Events in XAML

While building the UI using XAML, keyboard events can be set for each element. For example, the KeyDown event can be set for a TextBox like below.

<TextBox x:Name="inputTextBox" KeyDown="InputTextBox_KeyDown" />

2.2 Handling Events in C# Code

Now, you need to define what action to perform when the KeyDown event occurs. Below is how you can define the event handler in C# code behind.

private void InputTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
    // Get the key code
    var key = e.Key;

    // Logic for when the Enter key is pressed
    if (key == Windows.System.VirtualKey.Enter)
    {
        // Process the entered text
        string inputText = inputTextBox.Text;
        ProcessInput(inputText);
        // Clear the input box
        inputTextBox.Text = string.Empty;
    }
}
    

3. Utilizing Keyboard Events

There are several ways to utilize keyboard input in UWP. Here, we will look at some common scenarios.

3.1 Handling Text Input

When the user types text, the entered content can be processed in real-time and updated to other UI elements. For instance, you can make the changes immediately visible when the user changes the mode.

private void InputTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        // Handle user input
        string inputText = inputTextBox.Text;
        DisplayInput(inputText);
    }
}
    

3.2 Using Keyboard Input in Games and Animations

Keyboard input can also be utilized in creating games or animations. Keyboard events can be used to move characters or trigger specific animations based on each key.

private void GameCanvas_KeyDown(object sender, KeyRoutedEventArgs e)
{
    switch (e.Key)
    {
        case Windows.System.VirtualKey.W:
            MoveCharacterUp();
            break;
        case Windows.System.VirtualKey.S:
            MoveCharacterDown();
            break;
        case Windows.System.VirtualKey.A:
            MoveCharacterLeft();
            break;
        case Windows.System.VirtualKey.D:
            MoveCharacterRight();
            break;
    }
}
    

4. Advanced Feature: Simulating Keyboard Input

UWP also supports APIs that can forcibly trigger keyboard events. This functionality allows events to be automatically generated and processed based on conditions specified by the user. This can be particularly useful in game development.

private async void SimulateKeyPress(Windows.System.VirtualKey key)
{
    // Logic to simulate key input
    var keyEventArgs = new KeyRoutedEventArgs
    {
        Key = key
    };
    
    ExampleControl_KeyDown(this, keyEventArgs);
}
    

5. Conclusion

In this article, we examined the basics and applications of handling keyboard input events in UWP. This content is a fundamental feature used in many applications that require input. I hope you become a rewarding developer who enhances user experience by effectively utilizing keyboard input.

We hope this article helps improve your understanding of UWP development and is beneficial for practical development. If you have any questions or additional inquiries, feel free to ask at any time. Thank you!

Command binding in UWP (Universal Windows Platform) development is an important concept that connects the user interface (UI) with the application’s business logic. Commands define actions associated with UI elements (such as buttons and menus), facilitating easy interaction between code and the UI through data binding. This article will provide a detailed explanation of the concept of command binding, how to use it, example code, and how to effectively develop UWP applications using commands.

1. What is a Command?

A command is a class that defines actions the user can perform in the UI. In UWP, classes that implement the ICommand interface are used as commands. Commands provide two basic functionalities:

• Execute: Handles the conditions under which the command can be executed.
• CanExecute: Determines whether the command can currently be executed.

For example, the action of saving a file can be defined as a command when the ‘Save’ button is clicked. Once the command is defined, it can be bound to UI elements to execute the command.

2. ICommand Interface

The ICommand interface includes two events and two methods:

• Execute(object parameter) – Called when the command is executed.
• CanExecute(object parameter) – Determines whether the command can be executed.
• CanExecuteChanged – An event that occurs when the command’s status changes.

You can create custom commands by implementing this interface. Below is a simple example of implementing the ICommand interface:

using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action