{"id":6277,"date":"2024-09-29T09:45:20","date_gmt":"2024-09-29T07:45:20","guid":{"rendered":"https:\/\/ekiwi.de\/index.php\/6277\/xaml-cache-scrollable-page\/"},"modified":"2024-09-29T09:49:33","modified_gmt":"2024-09-29T07:49:33","slug":"xaml-page-scrollable","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/en\/index.php\/6277\/xaml-page-scrollable\/","title":{"rendered":"XAML page scrollable"},"content":{"rendered":"<p>Anyone working on XAML projects in Visual Studio will occasionally also use xaml pages.<\/p>\n<p>XAML pages are similar to XAML Windows or UserControls, with the difference that they already have a good navigation option (forwards and backwards).<\/p>\n<p>However, if the content of the page is larger than the height or width of the page itself, content elements disappear or are cut off. In such cases, the xaml page should therefore be scrollable, i.e. have scrollbars.<\/p>\n<p>This can be achieved by packing the entire content of the page within a &#8220;<strong>ScrollViewer<\/strong>&#8220;. In the ScrollViewer, you can use the parameters <em>VerticalScrollBarVisibility<\/em> and <em>HorizontalScrollBarVisibility<\/em> to define whether the vertical or horizontal scrollbar should be displayed. You can also set the parameters to &#8220;<em>Auto<\/em>&#8220;. In this case, the respective scrollbar is only displayed if the content is larger than the page window.<\/p>\n<p>The <strong>code<\/strong> then looks like this:<\/p>\n<pre><code><span style=\"color: #993366;\"><span style=\"color: #3366ff;\">&lt;<\/span>Page<\/span>\r\n    <span style=\"color: #ff0000;\">xmlns<\/span><span style=\"color: #3366ff;\">=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"<\/span>\r\n    <span style=\"color: #ff0000;\">xmlns<\/span><span style=\"color: #3366ff;\">:<\/span><span style=\"color: #ff0000;\">x<\/span><span style=\"color: #3366ff;\">=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"<\/span>\r\n    <span style=\"color: #ff0000;\">xmlns<\/span><span style=\"color: #3366ff;\">:<\/span><span style=\"color: #ff0000;\">mc<\/span><span style=\"color: #3366ff;\">=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"<\/span>\r\n    <span style=\"color: #ff0000;\">xmlns<\/span><span style=\"color: #3366ff;\">:<\/span><span style=\"color: #ff0000;\">d<\/span><span style=\"color: #3366ff;\">=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"<\/span>\r\n    <span style=\"color: #ff0000;\">mc<\/span><span style=\"color: #3366ff;\">:<\/span><span style=\"color: #ff0000;\">Ignorable<\/span><span style=\"color: #3366ff;\">=\"d\"<\/span> <span style=\"color: #ff0000;\">d<\/span><span style=\"color: #3366ff;\">:DesignHeight=\"600\"<\/span> <span style=\"color: #ff0000;\">d<\/span><span style=\"color: #3366ff;\">:DesignWidth=\"800\"<\/span>\r\n    <span style=\"color: #ff0000;\">x<\/span><span style=\"color: #3366ff;\">:<\/span><span style=\"color: #ff0000;\">Name<\/span><span style=\"color: #3366ff;\">=\"PgCompanyData\" Title=\"PageTitle\"&gt;<\/span>\r\n    <strong><span style=\"color: #993366;\"><span style=\"color: #3366ff;\">&lt;<\/span>ScrollViewer<\/span> <span style=\"color: #ff0000;\">VerticalScrollBarVisibility<\/span><span style=\"color: #3366ff;\">=\"Auto\"<\/span> <span style=\"color: #ff0000;\">HorizontalScrollBarVisibility<\/span><span style=\"color: #3366ff;\">=\"Auto\"&gt;<\/span><\/strong>\r\n        <span style=\"color: #3366ff;\">&lt;<\/span><span style=\"color: #993366;\">Grid<\/span><span style=\"color: #3366ff;\">&gt;<\/span>\r\n            <span style=\"color: #339966;\">&lt;!-- GridDefinitions and further content--&gt;<\/span>\r\n        <span style=\"color: #3366ff;\">&lt;<\/span><span style=\"color: #993366;\"><span style=\"color: #3366ff;\">\/<\/span>Grid<span style=\"color: #3366ff;\">&gt;<\/span><\/span>\r\n    <strong><span style=\"color: #993366;\"><span style=\"color: #3366ff;\">&lt;\/<\/span>ScrollViewer<span style=\"color: #3366ff;\">&gt;<\/span><\/span><\/strong>\r\n<span style=\"color: #993366;\"><span style=\"color: #3366ff;\">&lt;\/<\/span>Page<span style=\"color: #3366ff;\">&gt;\r\n<\/span><\/span><\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>Anyone working on XAML projects in Visual Studio will occasionally also use xaml pages. XAML pages are similar to XAML<\/p>\n","protected":false},"author":2,"featured_media":5726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[870],"tags":[872,1261,876,875],"class_list":["post-6277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-c-en","tag-csharp-en","tag-programming-en","tag-visual-studio-en"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/6277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/comments?post=6277"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/6277\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media\/5726"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media?parent=6277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/categories?post=6277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/tags?post=6277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}