{"id":37513,"date":"2024-11-01T09:58:10","date_gmt":"2024-11-01T09:58:10","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37513"},"modified":"2024-11-01T11:02:25","modified_gmt":"2024-11-01T11:02:25","slug":"uwp-development-scrolling","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37513\/","title":{"rendered":"UWP Development, Scrolling"},"content":{"rendered":"
\n

\n UWP (Universal Windows Platform) is a Microsoft platform that allows you to develop applications that work on all types of Windows devices. With UWP, you can easily create applications that can be used on PCs, tablets, XBOX, and IoT devices. This tutorial will delve deeply into how to implement scrolling functionality in UWP applications.\n <\/p>\n

The Importance of Scrolling<\/h2>\n

\n Scrolling is a crucial part of the user interface and is especially useful when presenting very large data sets or content to users. By using scrolling functionality, users can easily access various information and gracefully handle situations where it’s difficult to display all content at once.\n <\/p>\n

Implementing Scrolling in UWP<\/h2>\n

\n The most basic way to implement scrolling in UWP is to use the ScrollViewer<\/code>. The ScrollViewer<\/code> is a control that allows users to scroll through content when it does not fit on the screen. By default, the ScrollViewer<\/code> supports both horizontal and vertical scrolling, helping users easily navigate through the content.\n <\/p>\n

Basic Usage of ScrollViewer<\/h2>\n

\n Let’s look at the simplest use case of a scroll viewer. The example code below places a StackPanel<\/code> inside the ScrollViewer<\/code> to create multiple text blocks.\n <\/p>\n

<ScrollViewer Width=\"400\" Height=\"300\">\n    <StackPanel>\n        <TextBlock Text=\"First Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Second Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Third Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Fourth Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Fifth Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Sixth Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Seventh Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Eighth Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Ninth Item\" Margin=\"10\" \/>\n        <TextBlock Text=\"Tenth Item\" Margin=\"10\" \/>\n    <\/StackPanel>\n<\/ScrollViewer><\/code><\/pre>\n
\n        The above code arranges multiple TextBlock<\/code> elements within a specified size ScrollViewer<\/code>. Users can scroll to see additional items as needed.\n    <\/p>\n
Setting Scroll Direction<\/h2>\n
\n        The scroll direction of the ScrollViewer<\/code> can be configured. By default, vertical scrolling is enabled, but the HorizontalScrollMode<\/code> and VerticalScrollMode<\/code> properties can be used to set the direction.\n    <\/p>\n
<ScrollViewer HorizontalScrollMode=\"Enabled\" VerticalScrollMode=\"Disabled\" Width=\"400\" Height=\"100\">\n    <StackPanel Orientation=\"Horizontal\">\n        <TextBlock Text=\"Item 1\" Margin=\"10\" \/>\n        <TextBlock Text=\"Item 2\" Margin=\"10\" \/>\n        <TextBlock Text=\"Item 3\" Margin=\"10\" \/>\n    <\/StackPanel>\n<\/ScrollViewer><\/code><\/pre>\n
Controlling Scroll Behavior<\/h2>\n
\n        You can programmatically control the scroll position or adjust scroll behavior in response to events. The scroll viewer’s ChangeView<\/code> method can be used to scroll to a specific position.\n    <\/p>\n
ScrollViewer.ChangeView(0, 200, null);<\/code><\/pre>\n
\n        This method moves to a specified X and Y position. For example, you can scroll down 200 pixels.\n    <\/p>\n
Handling Scroll Events<\/h2>\n
\n        You can handle scroll events to detect the scroll state. For example, you can set it up to perform specific actions when the user starts scrolling or finishes scrolling.\n    <\/p>\n
scrollViewer.ViewChanged += ScrollViewer_ViewChanged;\n\nprivate void ScrollViewer_ViewChanged(ScrollViewer sender, object args) \n{\n    var verticalOffset = sender.VerticalOffset;\n    \/\/ Perform specific actions based on scroll position\n    if (verticalOffset == sender.ScrollableHeight) \n    {\n        \/\/ Reached the bottom\n    }\n}<\/code><\/pre>\n
Improving User Experience While Scrolling<\/h2>\n
\n        To enhance the user experience with the scroll viewer, you can add animations or set smooth transitions for the scroll position. By setting the IsVerticalScrollChainingEnabled<\/code> property of the ScrollViewer<\/code>, you can smoothly handle scroll behavior.\n    <\/p>\n
<ScrollViewer IsVerticalScrollChainingEnabled=\"True\" ... ><\/code><\/pre>\n
Conclusion<\/h2>\n
\n        Scrolling functionality is a crucial element in maximizing user experience in UWP development. The scroll viewer becomes a powerful tool for effectively displaying and managing various content and data. I hope this tutorial helps you understand and apply the usage and various settings of the scroll viewer.\n    <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
UWP (Universal Windows Platform) is a Microsoft platform that allows you to develop applications that work on all types of Windows devices. With UWP, you can easily create applications that can be used on PCs, tablets, XBOX, and IoT devices. This tutorial will delve deeply into how to implement scrolling functionality in UWP applications. The … \ub354 \ubcf4\uae30 “UWP Development, Scrolling”<\/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-37513","post","type-post","status-publish","format-standard","hentry","category-uwp-programming"],"yoast_head":"\nUWP Development, Scrolling - \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\/37513\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Scrolling - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"UWP (Universal Windows Platform) is a Microsoft platform that allows you to develop applications that work on all types of Windows devices. With UWP, you can easily create applications that can be used on PCs, tablets, XBOX, and IoT devices. This tutorial will delve deeply into how to implement scrolling functionality in UWP applications. The … \ub354 \ubcf4\uae30 "UWP Development, Scrolling"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37513\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:58:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:25+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=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Scrolling\",\"datePublished\":\"2024-11-01T09:58:10+00:00\",\"dateModified\":\"2024-11-01T11:02:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/\"},\"wordCount\":403,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37513\/\",\"name\":\"UWP Development, Scrolling - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:58:10+00:00\",\"dateModified\":\"2024-11-01T11:02:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37513\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37513\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Scrolling\"}]},{\"@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, Scrolling - \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\/37513\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Scrolling - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"UWP (Universal Windows Platform) is a Microsoft platform that allows you to develop applications that work on all types of Windows devices. With UWP, you can easily create applications that can be used on PCs, tablets, XBOX, and IoT devices. This tutorial will delve deeply into how to implement scrolling functionality in UWP applications. The … \ub354 \ubcf4\uae30 \"UWP Development, Scrolling\"","og_url":"https:\/\/atmokpo.com\/w\/37513\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:58:10+00:00","article_modified_time":"2024-11-01T11:02:25+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":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/37513\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37513\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Scrolling","datePublished":"2024-11-01T09:58:10+00:00","dateModified":"2024-11-01T11:02:25+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37513\/"},"wordCount":403,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37513\/","url":"https:\/\/atmokpo.com\/w\/37513\/","name":"UWP Development, Scrolling - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:58:10+00:00","dateModified":"2024-11-01T11:02:25+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37513\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37513\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37513\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Scrolling"}]},{"@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\/37513","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=37513"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37513\/revisions"}],"predecessor-version":[{"id":37514,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37513\/revisions\/37514"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}