Why the Scroll-viewer inside user UserControl in UWP is not working ....any advice?

Question

I am using the sample code provided in https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer to create a scroll-viewer in UWP UserControl as below, the UserControl doesn't work

 <UserControl
    x:Class="Controls.Custom"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    DataContext="{Binding ViewModel, Source={StaticResource ViewModelLoc}}">

        <Grid>
        <StackPanel Height="300" Width="300">
            <!-- A large TextBlock. -->
            <TextBlock Width="300" TextWrapping="Wrap" Margin="0,0,0,30" 
                       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />

            <!-- The same large TextBlock, wrapped in a ScrollViewer. -->
            <ScrollViewer Height="200" Width="200" 
                          HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <TextBlock Width="300" TextWrapping="Wrap"
                           Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />
            </ScrollViewer>
        </StackPanel>
    </Grid>
</UserControl>

But

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <!-- A large TextBlock. -->
            <TextBlock Width="300" TextWrapping="Wrap" Margin="0,0,0,30" 
                       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />

            <!-- The same large TextBlock, wrapped in a ScrollViewer. -->
            <ScrollViewer Height="200" Width="200" 
                          HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <TextBlock Width="300" TextWrapping="Wrap"
                           Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Page>

Works!. Any suggestions how to make working scroll-viewer in UserControl?

Answer 1

The reason the UserControl is not working is you set the Height of StackPanel to 300, but the sub-content requires more than 300 height, then child content is visually clipped. So you can remove the height restrictions in StackPanel or control the total height of the sub content to not exceed 300.

<UserControl ...>
    <Grid>
        <StackPanel Width="300">
            <!-- A large TextBlock. -->
            <TextBlock Width="300" TextWrapping="Wrap" Margin="0,0,0,30"
                       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />

            <!-- The same large TextBlock, wrapped in a ScrollViewer. -->
            <ScrollViewer Height="200" Width="200" 
                          HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <TextBlock Width="300" TextWrapping="Wrap"
                           Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque." />
            </ScrollViewer>
        </StackPanel>
    </Grid>
</UserControl>