UWP ScrollViewer not scrolling

Question

I'm trying to duplicate the basic interface of MS Word. I have the document created, with a border around it to give a dropshadow effect, and both of those are contained within a ScrollViewer. The problem is that the ScrollViewer isn't allowing scrolling. The only way I've gotten it to scroll at all is by setting ZoomMode="Enabled" on the ScrollViewer, then zooming in, in which case the scrollbars appear and it scrolls as expected. But when ZoomMode="Disabled", or when it's zoomed out, no scrolling, no scrollbars, nothing. It's as though the ScrollViewer doesn't exist.

I have a hunch that this is being caused by the layout controls that the ScrollViewer is a child of, but I have no idea what the cause may be. I've tried changing the height of the document within the ScrollViewer to force it to scroll, but this has no effect either.

Can somebody take a look at the XAML here and see if they can find where the error is please?

MainPage XAML

<Page
    x:Class="Bartleby.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Bartleby"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SplitView IsPaneOpen="True" DisplayMode="Inline" Background="Gray">
            <SplitView.Pane>
                    <StackPanel>
                            <TextBlock Text="Book Title" FontSize="24" FontWeight="Bold" />
                            <ListView>
                                    <ListViewItem Content="Chapter 1" />
                                    <ListViewItem Content="Chapter 2" />
                                    <ListViewItem Content="Chapter 3" />
                                    <ListViewItem Content="Chapter 4" />
                                    <ListViewItem Content="Chapter 5" />
                                    <ListViewItem Content="Chapter 6" />
                                    <Button x:Name="addChapter" Tapped="AddChapter_Tapped"/>
                            </ListView>
                    </StackPanel>
            </SplitView.Pane>
            <Grid HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="916" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="1152" />
                    </Grid.RowDefinitions>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.Resources>
                                    <Style TargetType="AppBarButton">
                                            <Setter Property="IsCompact" Value="True" />
                                    </Style>
                            </Grid.Resources>
                            <!--File Handling-->
                            <AppBarButton x:Name="openFileButton" Grid.Column="0" Icon="OpenFile" ToolTipService.ToolTip="Open file" />
                            <AppBarButton x:Name="saveFileButton" Grid.Column="1" Icon="Save" ToolTipService.ToolTip="Save file" RelativePanel.RightOf="openFileButton" />
                            <AppBarSeparator RelativePanel.RightOf="saveFileButton" Grid.Column="2" />
                            <!--Font Style-->
                            <AppBarButton x:Name="boldFileButton" Grid.Column="3" Icon="Bold" ToolTipService.ToolTip="Bold" RelativePanel.LeftOf="italicFileButton" />
                            <AppBarButton x:Name="italicFileButton" Grid.Column="4" Icon="Italic" ToolTipService.ToolTip="Italic" RelativePanel.LeftOf="underlineFileButton" />
                            <AppBarButton x:Name="underlineFileButton" Grid.Column="5" Icon="Underline" ToolTipService.ToolTip="Underline" RelativePanel.AlignRightWithPanel="True" />
                            <!--Alignment-->
                            <AppBarButton x:Name="alignLeftButton" Grid.Column="6" Icon="AlignLeft" ToolTipService.ToolTip="Align left" RelativePanel.RightOf="saveFileButton" />
                            <AppBarButton x:Name="alignCenterButton" Grid.Column="7" Icon="AlignCenter" ToolTipService.ToolTip="Align center" RelativePanel.RightOf="alignLeftButton" />
                            <AppBarButton x:Name="alignRightButton" Grid.Column="8" Icon="AlignRight" ToolTipService.ToolTip="Align right" RelativePanel.RightOf="alignCenterButton" />
                    </Grid>
                    <ScrollViewer Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" BringIntoViewOnFocusChange="False" Height="600" VerticalAlignment="Top">
                            <Border Margin="40" HorizontalAlignment="Stretch" >
                                    <local:DocumentView x:Name="editor" DocumentHeight="1056" DocumentWidth="816" PlaceholderText="Text Goes In Here" BorderBrush="Black" />
                            </Border>
                    </ScrollViewer>
            </Grid>
    </SplitView>
</Page>

You set the second row's height of the Grid is '1152', but your document height is 1056. Please try to change the second row's height to less than '1056' and to see if it can scroll. — Xie Steven
That did work to a point, as it did make it scroll, but it also took away the MS Word "Document" appearance I was looking for. Thank you for your help though! — Keven M

Mahmudul Hasan Mahmudul Hasan · Accepted Answer · 2019-04-07T08:30:40

Try this. This should work perfectly.

<ScrollViewer Grid.Row="1" 
              Grid.Column="0"
              Height="600"
              HorizontalScrollMode="Disabled"
              VerticalScrollBarVisibility="Auto"
              VerticalAlignment="Top">
    <!--If the elements don't exceed the size of the box, the scrollbar won't be visible-->
    <!--Use your BG color-->
    <Border Background="White"
            HorizontalAlignment="Stretch" >
        <!--Use SPanel or grid or RPanel to include more than one element-->
        <StackPanel Margin="10">
            <TextBlock x:Name="editor"
                       TextWrapping="Wrap"
                       Text="Custom Text more that the screen or the box size"/>
        </StackPanel>
    </Border>
</ScrollViewer>

UWP ScrollViewer not scrolling

1 Answers