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.<\/p>\n
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.<\/p>\n
To develop UWP apps, the following development environment is required:<\/p>\n
First, open Visual Studio and create a new UWP project. Follow the steps below:<\/p>\n
Now it’s time to add the ‘UserDetail’ page to the project. Please follow these steps:<\/p>\n
Design the UI of the added page. Below is example code for UserDetailPage.xaml:<\/p>\n
<Page\n x:Class=\"YourAppNamespace.UserDetailPage\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:local=\"using:YourAppNamespace\"\n xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n mc:Ignorable=\"d\">\n\n <Grid Background=\"{ThemeResource ApplicationPageBackgroundThemeBrush}\">\n <StackPanel Margin=\"20\">\n <TextBlock Text=\"User Detail\" FontSize=\"30\" FontWeight=\"Bold\" Margin=\"0,0,0,20\"\/>\n <TextBlock Text=\"Name:\" FontSize=\"20\" FontWeight=\"SemiBold\"\/>\n <TextBlock x:Name=\"UserName\" FontSize=\"20\" Margin=\"0,0,0,10\"\/>\n <TextBlock Text=\"Email:\" FontSize=\"20\" FontWeight=\"SemiBold\"\/>\n <TextBlock x:Name=\"UserEmail\" FontSize=\"20\" Margin=\"0,0,0,10\"\/>\n <Button Content=\"Edit\" Click=\"EditButton_Click\" Width=\"100\" Height=\"40\"\/>\n <\/StackPanel>\n <\/Grid>\n<\/Page>\n<\/code><\/pre>\n4.2 Writing Code in UserDetailPage.xaml.cs<\/h3>\n
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.<\/p>\n
using Windows.UI.Xaml.Controls;\n\nnamespace YourAppNamespace\n{\n public sealed partial class UserDetailPage : Page\n {\n public UserDetailPage()\n {\n this.InitializeComponent();\n LoadUserData();\n }\n\n private void LoadUserData()\n {\n \/\/ Sample data - can be replaced with actual database calls\n UserName.Text = \"John Doe\";\n UserEmail.Text = \"johndoe@example.com\";\n }\n\n private void EditButton_Click(object sender, RoutedEventArgs e)\n {\n \/\/ Implement edit functionality\n \/\/ For example: navigate to the user detail edit page\n }\n }\n}\n<\/code><\/pre>\n5. Setting Up Navigation<\/h2>\n
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.<\/p>\n
private void UserListView_ItemClick(object sender, ItemClickEventArgs e)\n{\n Frame.Navigate(typeof(UserDetailPage), e.ClickedItem);\n}\n<\/code><\/pre>\n6. Data Binding and Applying MVVM Pattern<\/h2>\n
In UWP development, you can manage data binding using the MVVM (Model-View-ViewModel) pattern. Below is an example implementing MVVM:<\/p>\n
public class UserViewModel : INotifyPropertyChanged\n{\n private string _userName;\n public string UserName\n {\n get => _userName;\n set\n {\n _userName = value;\n OnPropertyChanged();\n }\n }\n\n private string _userEmail;\n public string UserEmail\n {\n get => _userEmail;\n set\n {\n _userEmail = value;\n OnPropertyChanged();\n }\n }\n\n public void LoadUserData()\n {\n \/\/ Sample data - can be replaced with actual database calls\n UserName = \"John Doe\";\n UserEmail = \"johndoe@example.com\";\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n protected void OnPropertyChanged([CallerMemberName] string propertyName = null)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n}\n<\/code><\/pre>\n6.1 Applying MVVM in UserDetailPage.xaml<\/h3>\n
Now, set up data binding using the above ViewModel in UserDetailPage.xaml:<\/p>\n
<Page.DataContext>\n <local:UserViewModel \/>\n<\/Page.DataContext>\n\n<TextBlock Text=\"{Binding UserName}\" FontSize=\"20\" Margin=\"0,0,0,10\"\/>\n<TextBlock Text=\"{Binding UserEmail}\" FontSize=\"20\" Margin=\"0,0,0,10\"\/>\n<\/code><\/pre>\n7. Saving and Loading Data<\/h2>\n
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:<\/p>\n
private async void SaveUserData()\n{\n var file = await Windows.Storage.KnownFolders.DocumentsLibrary.CreateFileAsync(\"UserData.txt\", Windows.Storage.CreationCollisionOption.ReplaceExisting);\n await Windows.Storage.FileIO.WriteLinesAsync(file, new List { UserName.Text, UserEmail.Text });\n}\n\nprivate async void LoadUserData()\n{\n try\n {\n var file = await Windows.Storage.KnownFolders.DocumentsLibrary.GetFileAsync(\"UserData.txt\");\n var lines = await Windows.Storage.FileIO.ReadLinesAsync(file);\n UserName.Text = lines[0];\n UserEmail.Text = lines[1];\n }\n catch (FileNotFoundException)\n {\n \/\/ Set default values if the file is not found\n UserName.Text = \"John Doe\";\n UserEmail.Text = \"johndoe@example.com\";\n }\n}\n<\/code><\/pre>\n8. Testing and Debugging<\/h2>\n
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:<\/p>\n
\n- Ensure the UserDetail page displays correctly.<\/li>\n
- Check if user information loads properly.<\/li>\n
- Verify that the functionality works correctly when the edit button is clicked.<\/li>\n<\/ul>\n
9. Conclusion<\/h2>\n
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.<\/p>\n
10. References<\/h2>\n