UWP Development, Modifying UserDetailPage View

UWP (Universal Windows Platform) development is a powerful platform that allows you to create applications that can run on various Windows devices. In this course, we will go into detail on how to modify the UserDetailPage view, which is part of a UWP application. Since UWP follows the MVVM (Model-View-ViewModel) architecture, we will adjust the layout and functionality of the UserDetailPage while adhering to these principles. We will also provide opportunities to practice through some example codes.

Understanding the Structure of UWP

UWP applications consist of several components. At its core, there are View, Model, and ViewModel. The View provides the user interface (UI). The Model manages data and business logic, while the ViewModel handles the interaction between the View and the Model.

What is UserDetailPage?

UserDetailPage is a screen that displays the user’s details. It is typically used to show information such as the user’s name, email, profile picture, and contact information. This page is an important user experience (UX) element as it helps users manage their information.

Setting Up the Basic UserDetailPage

First, let’s create a project and set up the basic UserDetailPage.

Step 1: Create a New UWP Project

Open Visual Studio and select New Project. Choose the UWP app template and set the project name to UserDetailApp. After the project is created, the default page MainPage.xaml will open.

Step 2: Add UserDetailPage

XAML


    
        
            
            
            
            
        
    

Step 3: Implement UserDetailPage Code Behind

C#
using Windows.UI.Xaml.Controls;

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

        private void LoadUserData()
        {
            ProfilePicture.Source = new BitmapImage(new Uri("ms-appx:///Assets/profile.png"));
            UserName.Text = "John Doe";
            UserEmail.Text = "john@example.com";
        }

        private void EditButton_Click(object sender, RoutedEventArgs e)
        {
            // Edit user details logic
        }
    }
}

Improving UserDetailPage

The basic UserDetailPage displays user information in a very simple way. To enhance the user experience, let’s add some new features and designs.

Step 1: Add Profile Image Change Feature

We will add a feature that allows users to change their profile image. To do this, we will use the FileOpenPicker class to allow users to select an image from their local files.

C#
private async void EditButton_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
    picker.FileTypeFilter.Add(".jpg");
    picker.FileTypeFilter.Add(".png");

    var file = await picker.PickSingleFileAsync();
    if (file != null)
    {
        var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        var bitmap = new BitmapImage();
        bitmap.SetSource(stream);
        ProfilePicture.Source = bitmap;
    }
}

Step 2: Add User Name Edit Feature

Let’s add a text box to allow users to edit their names. We will modify the XAML layout to include the text box.

XAML

Now let’s add functionality to allow users to edit their names.

C#
private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    UserName.Text = UserNameTextBox.Text;
}

Improving UI/UX

Step 1: Adding Styling

Now let’s add various styles and layouts to make the user interface (UI) look more appealing.

XAML

    



    

Step 2: Adding Animations

Adding animations to the page can make the user experience more engaging. Let’s add animations in XAML.

XAML

    
        
        
            
                
            
        
    

Conclusion

In this course, we have learned in detail how to modify the UserDetailPage view in UWP. Through the process of adding functionality to effectively manage and update user profiles, we believe you have laid the groundwork for practical application development. UWP development is a very flexible and powerful platform, making it a great way to realize your creative ideas.

We hope that the UserDetailPage you create will provide a better experience for users, and that you will continue to add more advanced features.

Thank you!