XAML page scrollable

Anyone working on XAML projects in Visual Studio will occasionally also use xaml pages.

XAML pages are similar to XAML Windows or UserControls, with the difference that they already have a good navigation option (forwards and backwards).

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.

This can be achieved by packing the entire content of the page within a “ScrollViewer“. In the ScrollViewer, you can use the parameters VerticalScrollBarVisibility and HorizontalScrollBarVisibility to define whether the vertical or horizontal scrollbar should be displayed. You can also set the parameters to “Auto“. In this case, the respective scrollbar is only displayed if the content is larger than the page window.

The code then looks like this:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
    x:Name="PgCompanyData" Title="PageTitle">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid>
            <!-- GridDefinitions and further content-->
        </Grid>
    </ScrollViewer>
</Page>

Leave a Reply

Your email address will not be published. Required fields are marked *