{"id":37665,"date":"2024-11-01T09:59:25","date_gmt":"2024-11-01T09:59:25","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37665"},"modified":"2024-11-01T11:01:48","modified_gmt":"2024-11-01T11:01:48","slug":"uwp-development-outputting-the-values-of-rows-and-columns-in-the-given-format","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37665\/","title":{"rendered":"UWP Development, Outputting the Values of Rows and Columns in the Given Format"},"content":{"rendered":"
\n

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.<\/p>\n

Understanding the Basic Structure of UWP<\/h2>\n

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.<\/p>\n

Row and Column Data Structure<\/h3>\n

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

XAML UI Design<\/h2>\n

First, let’s define the UI in XAML. The code below sets up the basic UI for outputting row and column data.<\/p>\n

<Page\n    x:Class=\"MyApp.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    xmlns:local=\"using:MyApp\"\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>\n        <StackPanel>\n            <TextBlock Text=\"Data Output Example\" FontSize=\"24\" Margin=\"10\" \/>\n            <ListView x:Name=\"dataListView\">\n                <ListView.View>\n                    <GridView>\n                        <GridViewColumn Header=\"ID\" Width=\"100\" DisplayMemberBinding=\"{Binding Id}\" \/>\n                        <GridViewColumn Header=\"Name\" Width=\"200\" DisplayMemberBinding=\"{Binding Name}\" \/>\n                        <GridViewColumn Header=\"Age\" Width=\"100\" DisplayMemberBinding=\"{Binding Age}\" \/>\n                    <\/GridView>\n                <\/ListView.View>\n            <\/ListView>\n        <\/StackPanel>\n    <\/Grid>\n    <\/Page>\n    <\/code><\/pre>\n
Defining the Data Model<\/h2>\n
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<\/code>.<\/p>\n
public class Person\n    {\n        public int Id { get; set; }\n        public string Name { get; set; }\n        public int Age { get; set; }\n\n        public Person(int id, string name, int age)\n        {\n            Id = id;\n            Name = name;\n            Age = age;\n        }\n    }\n    <\/code><\/pre>\n
Loading and Binding Data<\/h2>\n
Now, let’s look at how to generate data and bind it to the ListView<\/code>. Add the following code to the MainPage.xaml.cs<\/code> file to initialize the data and connect it to the UI.<\/p>\n
using System.Collections.Generic;\n    using Windows.UI.Xaml.Controls;\n\n    namespace MyApp\n    {\n        public sealed partial class MainPage : Page\n        {\n            public MainPage()\n            {\n                this.InitializeComponent();\n                LoadData();\n            }\n\n            private void LoadData()\n            {\n                var people = new List<Person>\n                {\n                    new Person(1, \"Hong Gildong\", 25),\n                    new Person(2, \"Lee Mongryong\", 30),\n                    new Person(3, \"Seong Chunhyang\", 28),\n                };\n\n                dataListView.ItemsSource = people;\n            }\n        }\n    }\n    <\/code><\/pre>\n
Implementing Formatted Output<\/h2>\n
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<\/code> of the GridViewColumn<\/code> to format the values.<\/p>\n
<GridViewColumn Header=\"Formatted Age\" Width=\"150\">\n    <GridViewColumn.CellTemplate>\n        <DataTemplate>\n            <TextBlock>\n                <TextBlock.Text>{Binding Age, Converter={StaticResource AgeFormatConverter}}<\/TextBlock.Text>\n            <\/TextBlock>\n        <\/DataTemplate>\n    <\/GridViewColumn.CellTemplate>\n    <\/GridViewColumn>\n    <\/code><\/pre>\n
In the code above, AgeFormatConverter<\/code> is a converter that formats the age. This converter is necessary to transform the data bound in XAML for display on the screen.<\/p>\n
Implementing the Converter Class<\/h2>\n
using System;\n    using System.Globalization;\n    using Windows.UI.Xaml.Data;\n\n    public class AgeFormatConverter : IValueConverter\n    {\n        public object Convert(object value, Type targetType, object parameter, string language)\n        {\n            if (value is int age)\n            {\n                return $\"{age} years\"; \/\/ Formatted output\n            }\n            return string.Empty;\n        }\n\n        public object ConvertBack(object value, Type targetType, object parameter, string language)\n        {\n            throw new NotImplementedException();\n        }\n    }\n    <\/code><\/pre>\n
Run the App & Check Results<\/h2>\n
Now that everything is set up, run the application and check the data in the ListView<\/code>. Each row displays the ID, name, and age, with the age appearing in a formatted manner. This completes a simple UWP app!<\/p>\n
Conclusion<\/h2>\n
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.<\/p>\n
In the future, take more interest in UWP development and try adding various features. The next course will cover asynchronous programming in UWP.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
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 … \ub354 \ubcf4\uae30 “UWP Development, Outputting the Values of Rows and Columns in the Given Format”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-37665","post","type-post","status-publish","format-standard","hentry","category-uwp-programming"],"yoast_head":"\nUWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/37665\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"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 … \ub354 \ubcf4\uae30 "UWP Development, Outputting the Values of Rows and Columns in the Given Format"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37665\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:59:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:01:48+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Outputting the Values of Rows and Columns in the Given Format\",\"datePublished\":\"2024-11-01T09:59:25+00:00\",\"dateModified\":\"2024-11-01T11:01:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/\"},\"wordCount\":440,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37665\/\",\"name\":\"UWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:59:25+00:00\",\"dateModified\":\"2024-11-01T11:01:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37665\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37665\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Outputting the Values of Rows and Columns in the Given Format\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/37665\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"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 … \ub354 \ubcf4\uae30 \"UWP Development, Outputting the Values of Rows and Columns in the Given Format\"","og_url":"https:\/\/atmokpo.com\/w\/37665\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:59:25+00:00","article_modified_time":"2024-11-01T11:01:48+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/37665\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37665\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Outputting the Values of Rows and Columns in the Given Format","datePublished":"2024-11-01T09:59:25+00:00","dateModified":"2024-11-01T11:01:48+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37665\/"},"wordCount":440,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37665\/","url":"https:\/\/atmokpo.com\/w\/37665\/","name":"UWP Development, Outputting the Values of Rows and Columns in the Given Format - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:59:25+00:00","dateModified":"2024-11-01T11:01:48+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37665\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37665\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37665\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Outputting the Values of Rows and Columns in the Given Format"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=37665"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37665\/revisions"}],"predecessor-version":[{"id":37666,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37665\/revisions\/37666"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}