{"id":749,"date":"2019-02-12T13:40:50","date_gmt":"2019-02-12T13:40:50","guid":{"rendered":"https:\/\/ibex.tech\/windows-iot\/?p=749"},"modified":"2025-04-17T11:52:57","modified_gmt":"2025-04-17T10:52:57","slug":"scrolling-page","status":"publish","type":"post","link":"https:\/\/ibex.tech\/csharp\/uwp-programming-in-c\/windows-and-pages\/pages\/scrolling-page","title":{"rendered":"Scrolling Page"},"content":{"rendered":"\n

Simply use a ScrollViewer<\/p>\n\n\n\n

Vertical scrolling page example<\/h5>\n\n\n\n
<Page\n    x:Class=\"ecu_winiot.PageVentilation\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    xmlns:local=\"using:ecu_winiot\"\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    Background=\"{ThemeResource ApplicationPageBackgroundThemeBrush}\">\n\n    <ScrollViewer VerticalScrollMode=\"Enabled\" VerticalScrollBarVisibility=\"Auto\" HorizontalScrollMode=\"Disabled\" >\n        \n        <Grid Height=\"1735\">  <!-- Height optional, if not present it will auto size based on contents (e.g. the image below) -->\n            <Grid.RowDefinitions>\n                <RowDefinition Height=\"1*\"\/>\n                <RowDefinition Height=\"1*\"\/>\n                <RowDefinition Height=\"1*\"\/>\n            <\/Grid.RowDefinitions>\n            <Grid.ColumnDefinitions>\n                <ColumnDefinition Width=\"1*\"\/>\n                <ColumnDefinition Width=\"1*\"\/>\n            <\/Grid.ColumnDefinitions>\n\n            <!-- BACKGROUND IMAGE -->\n            <Image x:Name=\"imgBackground\" Source=\"Assets\/MyImage.png\" Stretch=\"UniformToFill\" Grid.ColumnSpan=\"999\" Grid.RowSpan=\"999\"\/>\n\n        <\/Grid>\n    <\/ScrollViewer>\n\n<\/Page><\/code><\/pre>\n\n\n\n
Programmatically scroll a page<\/h4>\n\n\n\n
Name your ScrollViewer and ensure scrolling is enabled<\/h5>\n\n\n\n
    <ScrollViewer x:Name=\"PageScrollViewer\" VerticalScrollMode=\"Enabled\" VerticalScrollBarVisibility=\"Hidden\" HorizontalScrollMode=\"Disabled\" >\n        <Canvas x:Name=\"OurCanvas\" Width=\"800\" Height=\"1513\"><\/code><\/pre>\n\n\n\n
The .cs code to scroll it<\/h5>\n\n\n\n
\tif (PageScrollViewer.VerticalOffset != 0)\n\t{\n\t\t\/\/Scroll to top\n\t\tPageScrollViewer.ChangeView(0, 0, 1);       \/\/horizontalOffset, verticalOffset, zoomFactor\n\t}\n\telse\n\t{\n\t\t\/\/Scroll to bottom\n\t\tPageScrollViewer.ChangeView(0, PageScrollViewer.ScrollableHeight, 1);\n\t}\n\n\t\/\/verticalOffset:\n\t\/\/\tA value between 0 and ScrollableHeight that specifies the distance the content should be scrolled vertically.\n<\/code><\/pre>\n\n\n\n
More ScrollViewer resources<\/h4>\n\n\n\n
FOR MORE SEE SECTION:  Scroll Viewer<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Simply use a ScrollViewer Vertical scrolling page example Programmatically scroll a page Name your ScrollViewer and ensure scrolling is enabled The .cs code to scroll it More ScrollViewer resources FOR MORE SEE SECTION: Scroll Viewer<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75,99],"tags":[],"class_list":["post-749","post","type-post","status-publish","format-standard","hentry","category-pages","category-scrollviewer"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":2,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/749\/revisions"}],"predecessor-version":[{"id":1394,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/749\/revisions\/1394"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/media?parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/categories?post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/tags?post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}