[英]Scrollviewer within another
I've started using WPF not long ago and I've been dealing with a ScrollViewer problem that seems actually pretty common : I have a ScrollViewer with content of varying, which is displayed together with other content, and the entire thing is inside another ScrollViewer. 我不久前就开始使用WPF,并且一直在处理一个ScrollViewer问题,该问题实际上似乎很常见:我有一个ScrollViewer,其内容各不相同,与其他内容一起显示,整个内容在另一个ScrollViewer中。 The whole thing looks something like that : 整个过程看起来像这样:
<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>
What I want is for the inner ScrollViewer to start reducing its content before the outer one, meaning if I have all this in a window and reduce the window size, I want the ScrollViewer with blue rectangle to start reducing its content and displaying its scrollbar before the outer one, the one containing orange rectangle does. 我要的是让内部ScrollViewer在外部的ScrollViewer之前开始减少其内容,这意味着如果我在一个窗口中拥有所有这些内容并减小窗口的大小,我希望带有蓝色矩形的ScrollViewer在开始之前减少其内容并显示其滚动条。最外面的一个,包含橙色矩形的那个。
After looking on the internet for a long while, I found two main advices : first one is to avoid using StackPanel - in this simplified example I could obviously use a Grid, in practice on the real project I'm not sure I could since the content I put in this ScrollViewer is of varying size depending what I'm binding in there. 在互联网上浏览了很长一段时间后,我发现了两个主要建议:第一个建议是避免使用StackPanel-在这个简化的示例中,我显然可以使用Grid,但实际上在实际项目中我不确定可以这样做,因为我放入此ScrollViewer中的内容的大小因我在其中绑定的内容而异。 Second one is something I found on an answer to an eerily similar question : 第二个是我在一个非常相似的问题的答案中发现的:
Which seemed to work well at first. 起初看起来效果不错。 The resulting xaml becomes : 产生的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>
But now I have the opposite problem : the inner scrollviewer is always stuck at a height of 60, even if I expand the window, but I would like it to take as much space as possible - display all the blue rectangles and hide the scrollbar if possible 但是现在我遇到了相反的问题:即使我扩大窗口,内部的滚动查看器也始终停留在60的高度,但是我希望它占用尽可能多的空间-如果出现以下情况,则显示所有蓝色矩形并隐藏滚动条可能
Does anyone know how to accomplish that ? 有谁知道如何做到这一点?
EDIT : 编辑:
I've found a temporary solution that's not perfect by using a DockPanel somewhere instead of a StackPanel, I'm guessing it would really be easier to solve this by avoiding stackpanels all together ? 我找到了一个临时解决方案,该解决方案不是通过在某个地方使用DockPanel而不是StackPanel来实现的,这是不完美的,我想通过避免一起使用stackpanels来解决这个问题真的会更容易吗? Here's the last version I have 这是我的最新版本
<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>
Now it's not perfect because part of the content is docked to the bottom but I'm going to try this as a work-around for now unless I find something better. 现在还不完美,因为部分内容已停靠在底部,但是除非能找到更好的方法,否则我现在将尝试作为一种变通方法。
I have solved this problem in the past by binding the appropriate width to the parent ActualWidth
using RelativeSource
. 我过去通过使用RelativeSource
将适当的宽度绑定到父ActualWidth
来解决此问题。
See How do I use WPF bindings with RelativeSource? 请参阅如何将WPF绑定与RelativeSource一起使用? . 。
Snoop is also very useful for working out how to find the property you want in the Visual Tree, see my tutorial on Snoop at ReSharper WPF error: "Cannot resolve symbol "MyVariable" due to unknown DataContext" . Snoop对于确定如何在可视树中查找所需的属性也非常有用,请参阅我在ReSharper WPF上关于Snoop的教程错误:“由于未知的DataContext,无法解析符号“ MyVariable”” 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.