UWP Development, Outputting the Values of Rows and Columns in the Given Format

Universal Windows Platform (UWP) development aims to create apps that can run on various devices. In this course, we will explain in detail how to output the values of rows and columns in a UWP application in a given format, and provide practical example code for this.

Understanding the Basic Structure of UWP

UWP applications are fundamentally made up of XAML (Extensible Application Markup Language) and C# or VB.NET. XAML is used to define the UI, while C# is used to implement the business logic of the application. Our goal is to set the format of the data and output it to the UI.

Row and Column Data Structure

There can be various ways to represent row and column data, but the most commonly used methods are to use controls like DataGrid and ListView. In this example, we will output the data of rows and columns using the ListView control.

XAML UI Design

First, let’s define the UI in XAML. The code below sets up the basic UI for outputting row and column data.

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <StackPanel>
            <TextBlock Text="Data Output Example" FontSize="24" Margin="10" />
            <ListView x:Name="dataListView">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="ID" Width="100" DisplayMemberBinding="{Binding Id}" />
                        <GridViewColumn Header="Name" Width="200" DisplayMemberBinding="{Binding Name}" />
                        <GridViewColumn Header="Age" Width="100" DisplayMemberBinding="{Binding Age}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </Grid>
    </Page>
    

Defining the Data Model

Define the data model to be used in the app. This model structures the data and makes it easy to work with. The code below defines a simple data model class called Person.

public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }

        public Person(int id, string name, int age)
        {
            Id = id;
            Name = name;
            Age = age;
        }
    }
    

Loading and Binding Data

Now, let’s look at how to generate data and bind it to the ListView. Add the following code to the MainPage.xaml.cs file to initialize the data and connect it to the UI.

using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;

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

            private void LoadData()
            {
                var people = new List<Person>
                {
                    new Person(1, "Hong Gildong", 25),
                    new Person(2, "Lee Mongryong", 30),
                    new Person(3, "Seong Chunhyang", 28),
                };

                dataListView.ItemsSource = people;
            }
        }
    }
    

Implementing Formatted Output

Now, let’s output the values of rows and columns in the given format. For example, we can output the age according to a specific criterion. To do this, we can use the CellTemplate of the GridViewColumn to format the values.

<GridViewColumn Header="Formatted Age" Width="150">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>{Binding Age, Converter={StaticResource AgeFormatConverter}}</TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
    </GridViewColumn>
    

In the code above, AgeFormatConverter is a converter that formats the age. This converter is necessary to transform the data bound in XAML for display on the screen.

Implementing the Converter Class

using System;
    using System.Globalization;
    using Windows.UI.Xaml.Data;

    public class AgeFormatConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is int age)
            {
                return $"{age} years"; // Formatted output
            }
            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
    

Run the App & Check Results

Now that everything is set up, run the application and check the data in the ListView. Each row displays the ID, name, and age, with the age appearing in a formatted manner. This completes a simple UWP app!

Conclusion

We have learned how to output the values of row and column fields in a given format in UWP development. We explored how to use XAML, data models, data binding, and format converters. With this foundation, you can advance to more complex applications.

In the future, take more interest in UWP development and try adding various features. The next course will cover asynchronous programming in UWP.