UWP Development, Template

Universal Windows Platform (UWP) is a platform for developing applications on the Windows 10 operating system, allowing the creation of applications that can run on various devices. UWP apps can operate on desktops, tablets, Xbox, IoT devices, and more. In this post, we will explore various aspects of UWP development, particularly focusing on ‘Templates’. Utilizing templates in UWP apps is a crucial factor that enhances development speed, maintains consistent UI/UX, and increases code reusability.

1. Importance of UWP Templates

Templates can be useful in many ways when developing UWP applications. Templates provide a basic structure and design, making it easier for developers to get started. This can yield the following benefits:

• Time Saving: Using predefined structures and styles can significantly enhance the speed of app development.
• UI/UX Consistency: It helps maintain a cohesive user experience.
• Code Reusability: Common components can be created for global use and reused whenever needed.

2. Types of UWP Templates

There are several types of templates available in UWP. Here, we will introduce some of the most commonly used template types.

2.1 Basic Template

The basic template provides the fundamental structure for a UWP app. It is the default app template that can be selected when creating a new project in Visual Studio. This template includes main files such as App.xaml and MainPage.xaml.

2.2 Blank Template

The blank template allows you to start from a clean slate for customization. With this template, developers can add the necessary elements to create a UI tailored to their needs.

2.3 Library Template

The library template is designed for code sharing and reuse. Using this template, you can write classes that contain common functionalities that can be used in other UWP projects.

3. Example of Implementing UWP Templates

Now that we understand the concept of UWP templates, let’s look at how we can use them in practice through code examples.

3.1 Basic App Template Example

Create a new UWP project in Visual Studio and select the ‘Blank App (Universal Windows)’ template. Below is the structure of the main files.

    Project
    ├── App.xaml
    ├── App.xaml.cs
    ├── MainPage.xaml
    └── MainPage.xaml.cs
    

Open the ‘MainPage.xaml’ file and add the code below to set up a simple UI.

    <Page
        x:Class="MyUWPApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyUWPApp"
        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 Text="Hello, UWP!" 
                       FontSize="36" 
                       VerticalAlignment="Center" 
                       HorizontalAlignment="Center"/>
        </Grid>
    </Page>
    

3.2 Blank Template Example

When selecting the blank template, there is no basic code, so you need to write it yourself as shown below. First, create a new project and select ‘Blank App (Universal Windows)’. Then, write the following code in the MainPage.xaml file.

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

        <Grid Background="White">
            <Button Content="Click Me" 
                    Click="Button_Click" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"/>
        </Grid>
    </Page>
    

Then, add the button click event handler in the ‘MainPage.xaml.cs’ file.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button button = sender as Button;
        button.Content = "Clicked!";
    }
    

3.3 Library Template Example

To create a library instance, you create a ‘Class Library (Universal Windows)’ project in Visual Studio. This allows you to create reusable code and resources across multiple UWP applications.

// SampleClass.cs
namespace MyUWPAppLibrary
{
    public class SampleClass
    {
        public string GetMessage()
        {
            return "Hello from MyUWPAppLibrary!";
        }
    }
}
    

The library you create can then be referenced in other UWP application projects.

4. Ways to Utilize Templates

When using templates, there are various ways to leverage them.

• Style Templates: Easily apply styles to UI elements like buttons and text boxes.
• Data Templates: Templates used to display data in controls like ListView and GridView.
• Control Templates: Define the visual structure of a UIControl for refactoring.

5. Conclusion

Now we have understood the role and importance of templates in UWP development and explored ways to implement them. By utilizing templates, you can reduce development time and effort while providing a more consistent user experience. When developing UWP apps in the future, actively use templates for more efficient development.

If you have any further questions or topics you would like to learn more about, please leave a comment!