ScrollViewer 在 Canvas 中不起作用

Posted 2023-04-12

【中文标题】ScrollViewer 在 Canvas 中不起作用

【英文标题】：ScrollViewer does not work inside Canvas

【发布时间】：2017-01-03 17:40:16

【问题描述】：

我正在尝试在Canvas 中使用ScrollViewer，但滚动不起作用。

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

  <Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
    <Canvas>
      <ScrollViewer>
        <StackPanel Orientation="Vertical" Width="400">
          <TextBlock Text="Just a huge text that will not fit into a single frame"
                     FontSize="100" TextWrapping="WrapWholeWords" />
        </StackPanel>
      </ScrollViewer>
    </Canvas>
  </Grid>
</Page>

但如果我将Canvas 切换为Grid，一切正常。有没有办法让ScrollViewer 在Canvas 中工作？

【问题讨论】：

@PeterDuniho 这实际上是重现我的问题的最小示例。我对 Canvas 工作原理的误解是问题的根源。您对我问题的回答实际上正是我所需要的。请将您描述 Canvas 工作原理的部分答案移至“答案”，我会将其标记为对我的问题的回答。

好的，完成。请注意我在您的问题中编辑的代码示例。这是一种预期的代码示例，以确保问题的易于理解和可重复性。有关更多详细信息（包括该文章末尾的链接），请参阅minimal reproducible example。

【参考方案1】：

根据您在帖子中包含的代码，您似乎没有给ScrollViewer 任何需要滚动的理由。 Canvas 元素不会以任何方式限制其子元素。所以在Canvas 中，ScrollViewer 可以随心所欲地变大，因此它将大到足以容纳其子代而无需滚动。在Grid 中，它将被拉伸以适合其单元格，因此如果单元格小于子单元格，它将允许滚动。给它一个滚动的理由，它就会滚动。

例如，您可以使ScrollViewer 始终与其父级Canvas 具有相同的尺寸：

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

  <Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
    <Canvas x:Name="canvas1">
      <ScrollViewer Width="Binding ActualWidth, ElementName=canvas1"
                    Height="Binding ActualHeight, ElementName=canvas1">
        <StackPanel Orientation="Vertical" Width="400">
          <TextBlock Text="Just a huge text that will not fit into a single frame"
                     FontSize="100" TextWrapping="WrapWholeWords" />
        </StackPanel>
      </ScrollViewer>
    </Canvas>
  </Grid>
</Page>

任何将ScrollViewer 的大小限制为小于其内容大小的东西都会导致滚动条变得可见和可用。

【讨论】：

谢谢，这正是我需要的！