Почему не работает Scroll-viewer внутри пользовательского UserControl в UWP .... какой совет?

Question

Я использую пример кода, предоставленный в https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer, чтобы создать просмотрщик прокрутки в UWP UserControl, как показано ниже, UserControl не работает

 <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>

Но

<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>

Работает! . Любые предложения, как сделать работу прокрутки-просмотра в UserControl?

Answer 1

Причина, по которой UserControl не работает, заключается в том, что вы установили значение высоты StackPanel равным 300, но для подконтента требуется более 300 высот, затем дочерний контент визуально обрезается. Таким образом, вы можете убрать ограничения по высоте в StackPanel или контролировать общую высоту суб-контента, чтобы она не превышала 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>

Answer 2

В вашем коде панель стека является родительской, а ScrollViewer работает как дочерний, если вы объявляете высоту и ширину для панели стека, то вам нужно назначить MaxHeight и MaxWidth для ScrollViewer. вам нужно установить высоту внутреннего текстового поля на 200

  <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 MaxHeight="200" MaxWidth="200" 
                          HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <TextBlock Width="200" 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>