另一个内的滚动查看器
Scrollviewer within another
我不久前开始使用 WPF,我一直在处理一个看起来很常见的 ScrollViewer 问题:我有一个内容不同的 ScrollViewer,它与其他内容一起显示,并且整个东西在另一个 ScrollViewer 里面。整个事情看起来像这样:
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
</ScrollViewer>
我想要的是内部 ScrollViewer 在外部 ScrollViewer 之前开始减少其内容,这意味着如果我将所有这些都放在 window 中并减少 window 大小,我想要 ScrollViewer使用蓝色矩形开始减少其内容并在外部滚动条之前显示其滚动条,包含橙色矩形的滚动条。
在网上看了很长时间后,我发现了两个主要建议:第一个是避免使用 StackPanel - 在这个简化的例子中我显然可以使用网格,但在实际项目中我不是当然可以,因为我放入此 ScrollViewer 的内容大小不一,具体取决于我在其中绑定的内容。
第二个是我在回答一个非常相似的问题时发现的:
Nested Scroll Areas
一开始似乎效果不错。结果 xaml 变为:
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<local:RestrictDesiredSize MinHeight="60">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
</local:RestrictDesiredSize>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
</ScrollViewer>
但现在我遇到了相反的问题:内部滚动查看器总是停留在 60 的高度,即使我展开 window,但我希望它尽可能多 space尽可能 - 显示所有蓝色矩形并尽可能隐藏滚动条
有谁知道如何做到这一点?
编辑:
我找到了一个临时解决方案,它在某处使用 DockPanel 而不是 StackPanel 并不完美,我猜通过避免使用堆栈面板来解决这个问题真的会更容易吗?这是我的最后一个版本
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel>
<StackPanel DockPanel.Dock="Top">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
<local:RestrictDesiredSize MinHeight="60">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
</local:RestrictDesiredSize>
</DockPanel>
</ScrollViewer>
现在它并不完美,因为部分内容已停靠在底部,但我将暂时尝试将此作为解决方法,除非我找到更好的东西。
我过去通过使用 RelativeSource
将适当的宽度绑定到父级 ActualWidth
解决了这个问题。
参见How do I use WPF bindings with RelativeSource?。
Snoop 对于找出如何在可视化树中找到所需的 属性 也非常有用,请参阅我在 ReSharper WPF error: "Cannot resolve symbol "MyVariable" due to unknown DataContext" 上关于 Snoop 的教程。
我不久前开始使用 WPF,我一直在处理一个看起来很常见的 ScrollViewer 问题:我有一个内容不同的 ScrollViewer,它与其他内容一起显示,并且整个东西在另一个 ScrollViewer 里面。整个事情看起来像这样:
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
</ScrollViewer>
我想要的是内部 ScrollViewer 在外部 ScrollViewer 之前开始减少其内容,这意味着如果我将所有这些都放在 window 中并减少 window 大小,我想要 ScrollViewer使用蓝色矩形开始减少其内容并在外部滚动条之前显示其滚动条,包含橙色矩形的滚动条。
在网上看了很长时间后,我发现了两个主要建议:第一个是避免使用 StackPanel - 在这个简化的例子中我显然可以使用网格,但在实际项目中我不是当然可以,因为我放入此 ScrollViewer 的内容大小不一,具体取决于我在其中绑定的内容。 第二个是我在回答一个非常相似的问题时发现的:
Nested Scroll Areas
一开始似乎效果不错。结果 xaml 变为:
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<local:RestrictDesiredSize MinHeight="60">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
</local:RestrictDesiredSize>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
</ScrollViewer>
但现在我遇到了相反的问题:内部滚动查看器总是停留在 60 的高度,即使我展开 window,但我希望它尽可能多 space尽可能 - 显示所有蓝色矩形并尽可能隐藏滚动条
有谁知道如何做到这一点?
编辑:
我找到了一个临时解决方案,它在某处使用 DockPanel 而不是 StackPanel 并不完美,我猜通过避免使用堆栈面板来解决这个问题真的会更容易吗?这是我的最后一个版本
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel>
<StackPanel DockPanel.Dock="Top">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom">
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Orange"/>
</StackPanel>
<local:RestrictDesiredSize MinHeight="60">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
<Rectangle Height="50" Width="50" Margin="5" Fill="Blue"/>
</StackPanel>
</ScrollViewer>
</local:RestrictDesiredSize>
</DockPanel>
</ScrollViewer>
现在它并不完美,因为部分内容已停靠在底部,但我将暂时尝试将此作为解决方法,除非我找到更好的东西。
我过去通过使用 RelativeSource
将适当的宽度绑定到父级 ActualWidth
解决了这个问题。
参见How do I use WPF bindings with RelativeSource?。
Snoop 对于找出如何在可视化树中找到所需的 属性 也非常有用,请参阅我在 ReSharper WPF error: "Cannot resolve symbol "MyVariable" due to unknown DataContext" 上关于 Snoop 的教程。