UWP Development, Adding UserDetail Page

UWP (Universal Windows Platform) app development is the process of creating applications that can run on various Windows devices. In this tutorial, we will explain in detail how to add a ‘UserDetail’ page to a UWP app. This page displays user details and contains features aimed at enhancing the app’s usability.

1. Overview of UWP and UserDetail Page

UWP is an app platform based on the Windows 10 operating system. With UWP, you can develop applications that can be used on various devices, including desktops, tablets, and console TVs. The UserDetail page shows the user’s profile information and has become one of the essential elements of the application.

2. Setting Up the Development Environment

To develop UWP apps, the following development environment is required:

  • Windows 10 Operating System: UWP development is supported only on Windows 10.
  • Visual Studio 2022: An IDE for developing UWP applications.
  • Windows SDK: The SDK necessary for UWP development.

3. Creating a UWP Project

First, open Visual Studio and create a new UWP project. Follow the steps below:

  1. Launch Visual Studio.
  2. Select File > New > Project.
  3. Select ‘Blank App (Universal Windows)’ and specify a project name, then click the ‘Create’ button.
  4. Select the Target version and Minimum version. It is recommended to set it to the latest version.

4. Adding UserDetail Page

Now it’s time to add the ‘UserDetail’ page to the project. Please follow these steps:

  1. Right-click the project in Solution Explorer and select ‘Add’ > ‘New Item.’
  2. Select ‘Blank Page’ and name the page ‘UserDetailPage.xaml.’

4.1 Designing UserDetailPage.xaml

Design the UI of the added page. Below is example code for UserDetailPage.xaml:

<Page
    x:Class="YourAppNamespace.UserDetailPage"
    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}">
        <StackPanel Margin="20">
            <TextBlock Text="User Detail" FontSize="30" FontWeight="Bold" Margin="0,0,0,20"/>
            <TextBlock Text="Name:" FontSize="20" FontWeight="SemiBold"/>
            <TextBlock x:Name="UserName" FontSize="20" Margin="0,0,0,10"/>
            <TextBlock Text="Email:" FontSize="20" FontWeight="SemiBold"/>
            <TextBlock x:Name="UserEmail" FontSize="20" Margin="0,0,0,10"/>
            <Button Content="Edit" Click="EditButton_Click" Width="100" Height="40"/>
        </StackPanel>
    </Grid>
</Page>

4.2 Writing Code in UserDetailPage.xaml.cs

To define the behavior of the page, write the UserDetailPage.xaml.cs file as follows. Here, we implement the function of selecting and displaying basic user information from a list.

using Windows.UI.Xaml.Controls;

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

        private void LoadUserData()
        {
            // Sample data - can be replaced with actual database calls
            UserName.Text = "John Doe";
            UserEmail.Text = "johndoe@example.com";
        }

        private void EditButton_Click(object sender, RoutedEventArgs e)
        {
            // Implement edit functionality
            // For example: navigate to the user detail edit page
        }
    }
}

5. Setting Up Navigation

Set up navigation to allow the UserDetail page to be called from other pages. You can navigate to the UserDetail page through button click events on the main page or list page.

private void UserListView_ItemClick(object sender, ItemClickEventArgs e)
{
    Frame.Navigate(typeof(UserDetailPage), e.ClickedItem);
}

6. Data Binding and Applying MVVM Pattern

In UWP development, you can manage data binding using the MVVM (Model-View-ViewModel) pattern. Below is an example implementing MVVM:

public class UserViewModel : INotifyPropertyChanged
{
    private string _userName;
    public string UserName
    {
        get => _userName;
        set
        {
            _userName = value;
            OnPropertyChanged();
        }
    }

    private string _userEmail;
    public string UserEmail
    {
        get => _userEmail;
        set
        {
            _userEmail = value;
            OnPropertyChanged();
        }
    }

    public void LoadUserData()
    {
        // Sample data - can be replaced with actual database calls
        UserName = "John Doe";
        UserEmail = "johndoe@example.com";
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

6.1 Applying MVVM in UserDetailPage.xaml

Now, set up data binding using the above ViewModel in UserDetailPage.xaml:

<Page.DataContext>
    <local:UserViewModel />
</Page.DataContext>

<TextBlock Text="{Binding UserName}" FontSize="20" Margin="0,0,0,10"/>
<TextBlock Text="{Binding UserEmail}" FontSize="20" Margin="0,0,0,10"/>

7. Saving and Loading Data

We will discuss how to save and retrieve information entered by the user. UWP can use local databases or files to store data. Below is a simple example of saving and loading using files:

private async void SaveUserData()
{
    var file = await Windows.Storage.KnownFolders.DocumentsLibrary.CreateFileAsync("UserData.txt", Windows.Storage.CreationCollisionOption.ReplaceExisting);
    await Windows.Storage.FileIO.WriteLinesAsync(file, new List { UserName.Text, UserEmail.Text });
}

private async void LoadUserData()
{
    try
    {
        var file = await Windows.Storage.KnownFolders.DocumentsLibrary.GetFileAsync("UserData.txt");
        var lines = await Windows.Storage.FileIO.ReadLinesAsync(file);
        UserName.Text = lines[0];
        UserEmail.Text = lines[1];
    }
    catch (FileNotFoundException)
    {
        // Set default values if the file is not found
        UserName.Text = "John Doe";
        UserEmail.Text = "johndoe@example.com";
    }
}

8. Testing and Debugging

Once development is complete, run the app in Visual Studio to verify that the UserDetail page works as expected. The following points should be tested:

  • Ensure the UserDetail page displays correctly.
  • Check if user information loads properly.
  • Verify that the functionality works correctly when the edit button is clicked.

9. Conclusion

This document provides a detailed explanation of how to add a UserDetail page to a UWP app. By leveraging the powerful features of UWP, you can create applications that can be used across various devices. We hope you have learned the structure and operating principle of a basic UserDetail page through this tutorial. We wish you much success in your future UWP development journey.

10. References