How to set scroll-viewer inside scroll-viewer in UWP

Question

i want to display a scroll-viewer inside scroll-viewer. The parent scroll-viewer should work vertically and child scroll-viewer work both horizontal and vertical.

i tried to add whole grid inside the parent scroll-viewer when i am resize the page the parent scroll-viewer is not working and child scroll-viewer is horizontal work not vertical.

 <Grid>
     <VisualStateManager> ...
     <ScrollViewer  >
    <Grid HorizontalAlignment="Stretch" Height="1000" Margin="0,0,0,0" VerticalAlignment="Top">
         <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="COne" Width="59"/>
            <ColumnDefinition x:Name="CTwo" Width="31*"/>
            <ColumnDefinition x:Name="CThree" Width="44*"/>
            <ColumnDefinition x:Name="CFour" Width="53*"/>
            <ColumnDefinition x:Name="CFive" Width="116*"/>
            <ColumnDefinition x:Name="CSix" Width="40*"/>
            <ColumnDefinition x:Name="CSeven" Width="262*"/>
            <ColumnDefinition x:Name="CEight" Width="234*"/>
            <ColumnDefinition x:Name="Cnine" Width="350*"/>
             </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="ROne" Height="45*"/>
            <RowDefinition x:Name="RTwo" Height="23*"/>
            <RowDefinition x:Name="RThree" Height="432*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

      <Border CornerRadius="5" extensions:Mouse.Cursor="Hand" BorderBrush="#E1E1E1" BorderThickness="1" Grid.ColumnSpan="8" Margin="7,18,31,395" Grid.Column="1" Grid.Row="2" >


            <ScrollViewer  x:Name="Gridscroller" HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto"    Grid.ColumnSpan="8"  Grid.Column="1" Grid.Row="2" >
                <Toolkit:DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"   extensions:Mouse.Cursor="Hand"   Style="{StaticResource GridBackground}"   BorderBrush="Transparent"  BorderThickness="5"   AllowFocusOnInteraction="False" x:Name="UserListView"  SelectionMode="Single"     FontSize="16" RelativePanel.AlignLeftWithPanel="True" Grid.ColumnSpan="8" Grid.Column="1" Grid.Row="2" OrderChanged="UserListView_OrderChanged" Tapped="UserListView_Tapped" >
.
.
.
  </Toolkit:DataGrid>
            </ScrollViewer>

        </Border>

 <TextBlock FontFamily="{StaticResource inventorySemiBoldFont}" Foreground="#444444" FontSize="13" Visibility="Visible"  x:Name="SearchMessage" Grid.Column="3" HorizontalAlignment="Left" Margin="0,74,0,0" Grid.Row="2"  VerticalAlignment="Top" Grid.ColumnSpan="4" Width="391"/>


        <StackPanel HorizontalAlignment="Center"  Margin="0,486,32,0" Grid.Row="2" VerticalAlignment="Top"  Grid.ColumnSpan="7" Grid.Column="2"  />

</Grid>
 </ScrollViewer>
</Grid>

Answer 1

In ScrollViewer, scrolling only when the content width/height is larger than the container width/height, but the internal viewable area of the ScrollViewer is infinite, so if you want the child ScrollViewer to work, you need to set the width/height for it.

like:

<ScrollViewer>
    <ScrollViewer width="500" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
        <!-- Content here -->
    </ScrollViewer/>
</ScrollViewer>

Best regards.