ScrollViewer 在 WPF 中不滚动答案

【问题标题】：ScrollViewer not scrolling in WPFScrollViewer 在 WPF 中不滚动
【发布时间】：2010-11-11 02:29:00
【问题描述】：

我在堆栈面板周围使用了一个滚动查看器控件，其中包含一个 ItemsControl。当 ItemsControl 中有许多项目时，它应该滚动，但由于某种原因它只是剪切项目。这是代码：

<StackPanel>
    <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible">
        <ItemsControl  Name="icEvents" Width="Auto" Height="100"  Background="AliceBlue" 
                       ItemsSource="{Binding Path=EventSources}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Source:"/>
                        <TextBlock Text="{Binding Path=Source}" />
                        <TextBlock Text="Original Source:"/>
                        <TextBlock Text="{Binding Path=OriginalSource}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>

【问题讨论】：

标签： wpf scrollviewer

【解决方案1】：

ItemsControl 应该包含ScrollViewer，而不是相反。在您的情况下，ScrollViewer 只知道ItemsControl 本身 - 它不知道内部项目。

试试这样的：

<ItemsControl Name="icEvents" Width="Auto" Height="100"
    Background="AliceBlue"
    ItemsSource="{Binding Path=EventSources}">
    <ItemsControl.ItemTemplate>
        <DataTemplate> 
            <StackPanel>
                <TextBlock Text="Source:"/>
                <TextBlock Text="{Binding Path=Source}" />
                <TextBlock Text="Original Source:"/>
                <TextBlock Text="{Binding Path=OriginalSource}" />
            </StackPanel>  
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ItemsPresenter Margin="5" />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

【讨论】：

不需要scrollviwer，问题出在StackPanel上。
你需要一个 ScrollViewer，因为默认情况下 ItemsControl 不滚动。我已经使用了这段代码，它可以工作，尽管你的答案可能也可以。
是的，您的代码也只有在他删除外部 StackPanel 时才有效，而且您在 ControlTemplate 内或 ItemsControl 外有滚动条都几乎相同。
这是我的问题 - 我做错了 - 非常感谢

【解决方案2】：

尝试在 ScrollViwer 周围设置一个网格，而不是 StackPanel。我认为StackPanel 会提供内部内容所需的高度，所以这里Scrollviwer 不能正常工作，因为它的高度不受其父控件的限制。

你可以从下面的例子中理解这个问题。

<StackPanel>
    <ScrollViewer>
        <ItemsControl >
            <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>

上面的代码与你的相似，它没有给你滚动条。但是请参阅下面的代码，其中我仅将 StackPanel 更改为 Grid（任何根据面板大小尊重其子项大小但 stackpanel 没有的面板）

<Grid>
    <ScrollViewer>
        <ItemsControl >
            <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
        </ItemsControl>
    </ScrollViewer>
</Grid>

更新：但如果您真的需要使用StackPanel，那么您可能需要设置ScrollViwer 的大小以获取内容滚动

【讨论】：

这可能是不可能的，因为一切都在 StackPanel 中。页面上没有网格。只有包含两个其他堆栈面板的主堆栈面板。当我说堆栈面板的高度为 100 时，甚至会发生这种情况。
问题是窗口上的每个控件都包含在一个主堆栈面板控件中。
但是如果你真的需要使用 StackPanel 那么你可能需要设置你的 ScrollViwer 的大小来获得内容滚动，因为正如我之前所说的那样 StackPanel 不尊重它的孩子的高度或宽度。所以我们在使用StackPanel的时候要设置一个高度和宽度
我在 ScrollViewer 上设置了高度，它起作用了！非常感谢！
检查我的答案：它解决了绑定到 StackPanel 的实际高度的问题

【解决方案3】：

您必须修复 Scrollviewer 的高度，但可以轻松绑定到 StackPanel ActualHeight：
（测试代码）

<StackPanel Name="mypanel">
   <ScrollViewer Height="{Binding ElementName=mypanel, Path=ActualHeight}">
       <ItemsControl>
          <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" />
      </ItemsControl>
   </ScrollViewer>
</StackPanel>

或者更好的是，如果您不能更改 StackPanel 的名称：

<StackPanel>
    <ScrollViewer Height="{Binding RelativeSource={RelativeSource FindAncestor, 
                        AncestorType={x:Type StackPanel}}, Path=ActualHeight}">
       <ItemsControl>
          <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" />
      </ItemsControl>
   </ScrollViewer>
</StackPanel>

这是一个“你优先”的问题，StackPanel 向 ScrollViewer 询问高度，而 ScrollViewer 向 StackPanel 询问它可以达到的最大高度。

【讨论】：

感谢您提供如此丰富的答案！这肯定会派上用场！

【解决方案4】：

Scroll 需要是调整大小的子项的父级，因此，将调整大小的控件（在本例中为堆栈面板）放入其中。

<ScrollViewer>
    <StackPanel>
         <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
         <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
         <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
         <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
         <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
    </StackPanel>

【讨论】：

【解决方案5】：

我遇到了一个问题，我在 Grid 中显示了 ItemsControl，为了看到滚动条，我必须给这个 Grid 单元格提供 * 大小的高度。

然而，这意味着ItemsControl 总是填充单元格，即使只有几个值也是如此。

我希望ItemsControl 大到足以显示它的内容，但如果它有太多项目，那么我希望它滚动。换句话说，我希望它只适用于任何尺寸的显示器。

Loaded 事件中的这段代码对我有用：

Size x = new Size(double.PositiveInfinity, double.PositiveInfinity);
myItemscontrol.Measure(x);

【讨论】：