嵌套滚动区域
Posted
技术标签:
【中文标题】嵌套滚动区域【英文标题】：Nested Scroll Areas 【发布时间】：2010-09-16 22:52:33 【问题描述】：我为 WPF 创建了一个控件，我有一个问题要请教各位 WPF 专家。
我希望我的控件能够扩展以适应可调整大小的窗口。
在我的控件中，我有一个想要随窗口展开的列表框。列表框周围还有其他控件（按钮、文本等）。
我希望能够在我的控件上设置最小尺寸，但我希望能够通过创建用于查看控件的滚动条来缩小窗口的大小。
这会创建：一个用于列表框，一个 ScrollViewer 包裹整个控件。
现在，如果列表框设置为自动大小，它将永远不会有滚动条，因为它总是在 ScrollViewer 中以全尺寸绘制。
如果内容不能变小，我只希望控件滚动，否则我不想滚动控件；相反，我想滚动控件内的列表框。
如何更改 ScrollViewer 类的默认行为？我尝试从 ScrollViewer 类继承并覆盖 MeasureOverride 和 ArrangeOverride 类，但我无法弄清楚如何正确测量和安排孩子。看来排列必须以某种方式影响 ScrollContentPresenter，而不是实际的内容子项。
任何帮助/建议将不胜感激。
【问题讨论】：
好问题。我们自己也遇到了非常相似的问题。 【参考方案1】：我创建了一个类来解决这个问题：
public class RestrictDesiredSize : Decorator
Size lastArrangeSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
protected override Size MeasureOverride(Size constraint)
Debug.WriteLine("Measure: " + constraint);
base.MeasureOverride(new Size(Math.Min(lastArrangeSize.Width, constraint.Width),
Math.Min(lastArrangeSize.Height, constraint.Height)));
return new Size(0, 0);
protected override Size ArrangeOverride(Size arrangeSize)
Debug.WriteLine("Arrange: " + arrangeSize);
if (lastArrangeSize != arrangeSize)
lastArrangeSize = arrangeSize;
base.MeasureOverride(arrangeSize);
return base.ArrangeOverride(arrangeSize);
即使包含的元素想要更大，它也会始终返回所需的大小 (0,0)。 用法：
<local:RestrictDesiredSize MinWidth="200" MinHeight="200">
<ListBox />
</local>
【讨论】：
干净、简单、优雅的解决方案【参考方案2】：问题出现了，因为ScrollViewer 中的Controls 几乎有无限的可用空间。因此，您的内部ListBox 认为它可以通过占用显示所有元素所需的完整高度来避免滚动。当然，在您的情况下，这种行为会产生不必要的副作用，即过度使用外部 ScrollViewer。
因此，目标是让ListBox 使用ScrollViewer 内的可见 高度，前提是它有足够的高度，否则为某个最小高度。要实现这一点，最直接的方法是从ScrollViewer 继承并覆盖MeasureOverride() 以传递适当大小的availableSize（即给定的availableSize 被放大到最小大小而不是“通常的”无穷大）到使用VisualChildrenCount 和GetVisualChild(int) 找到的Visuals。
【讨论】：
+1 以获得关于无限可用空间的解释。【参考方案3】：我使用了Daniels 解决方案。这很好用。谢谢。
然后我在装饰器类中添加了两个布尔依赖属性：KeepWidth 和 KeepHeight。所以新特征可以在一维上被抑制。
这需要更改MeasureOverride：
protected override Size MeasureOverride(Size constraint)
var innerWidth = Math.Min(this._lastArrangeSize.Width, constraint.Width);
var innerHeight = Math.Min(this._lastArrangeSize.Height, constraint.Height);
base.MeasureOverride(new Size(innerWidth, innerHeight));
var outerWidth = KeepWidth ? Child.DesiredSize.Width : 0;
var outerHeight = KeepHeight ? Child.DesiredSize.Height : 0;
return new Size(outerWidth, outerHeight);
【讨论】：
【参考方案4】：虽然我不建议创建需要外部滚动条的 UI，但您可以很容易地做到这一点：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListBox Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" MinWidth="200"/>
<Button Grid.Row="0" Grid.Column="1" Content="Button1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button2"/>
<Button Grid.Row="2" Grid.Column="1" Content="Button3"/>
</Grid>
</ScrollViewer>
</Window>
我真的不推荐这个。 WPF 提供了特殊的布局系统，如 Grid，您应该尝试允许应用程序根据需要调整自身大小。也许您可以在窗口本身上设置 MinWidth/MinHeight 以防止这种调整大小？
【讨论】：
困难在于我希望能够在不裁剪控件的情况下将窗口缩小到最小尺寸以下。 你有让窗口缩小到最小尺寸以下吗？允许这样做是为了达到什么目的？ 不，不必这样做，但如果我不这样做，整个问题就会消失。我想缩小到最小尺寸以下以允许灵活的布局。我实际上正在构建一个应用程序，其中包含可以调整大小和定位的“类似窗口”的控件。 那么上面的代码应该适合你。只需确保您的作品位于正确的“*”和“Auto”大小的列中，并确保外部 ScrollViewer 使用“Auto”作为 Horizontal/VerticalScrollbarVisibility。 而且，您可能希望将它们保持为“可见”，以防止在需要突然可见时跳转。【参考方案5】：在代码隐藏中创建一个方法，将 ListBox 的 MaxHeight 设置为包含它的任何控件和其他控件的高度。如果列表框在其上方或下方有任何控件/边距/填充，请从分配给 MaxHeight 的容器高度中减去它们的高度。在主窗口“加载”和“窗口调整大小”事件处理程序中调用此方法。
这应该给你两全其美。尽管主窗口有自己的滚动条，但您正在给 ListBox 一个“固定”大小，这将导致它滚动。
【讨论】：
【参考方案6】：适用于 2 个 ScrollViewer
public class ScrollExt: ScrollViewer
Size lastArrangeSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
public ScrollExt()
protected override Size MeasureOverride(Size constraint)
base.MeasureOverride(new Size(Math.Min(lastArrangeSize.Width, constraint.Width),
Math.Min(lastArrangeSize.Height, constraint.Height)));
return new Size(0, 0);
protected override Size ArrangeOverride(Size arrangeSize)
if (lastArrangeSize != arrangeSize)
lastArrangeSize = arrangeSize;
base.MeasureOverride(arrangeSize);
return base.ArrangeOverride(arrangeSize);
代码：
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Background="Beige" Width="600" Text="Example"/>
<Grid Grid.Column="1" x:Name="grid">
<Grid Grid.Column="1" Margin="25" Background="Green">
<local:ScrollExt HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid Width="10000" Margin="25" Background="Red" />
</local:ScrollExt>
</Grid>
</Grid>
</Grid>
</ScrollViewer>
【讨论】：
【参考方案7】：我最终结合了Daniels 答案和Heiner's 答案。我决定发布整个解决方案，以便人们在需要时更容易采用它。这是我的装饰类：
public class RestrictDesiredSizeDecorator : Decorator
public static readonly DependencyProperty KeepWidth;
public static readonly DependencyProperty KeepHeight;
#region Dependency property setters and getters
public static void SetKeepWidth(UIElement element, bool value)
element.SetValue(KeepWidth, value);
public static bool GetKeepWidth(UIElement element)
return (bool)element.GetValue(KeepWidth);
public static void SetKeepHeight(UIElement element, bool value)
element.SetValue(KeepHeight, value);
public static bool GetKeepHeight(UIElement element)
return (bool)element.GetValue(KeepHeight);
#endregion
private Size _lastArrangeSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
static RestrictDesiredSizeDecorator()
KeepWidth = DependencyProperty.RegisterAttached(
nameof(KeepWidth),
typeof(bool),
typeof(RestrictDesiredSizeDecorator));
KeepHeight = DependencyProperty.RegisterAttached(
nameof(KeepHeight),
typeof(bool),
typeof(RestrictDesiredSizeDecorator));
protected override Size MeasureOverride(Size constraint)
Debug.WriteLine("Measure: " + constraint);
var keepWidth = GetValue(KeepWidth) as bool? ?? false;
var keepHeight = GetValue(KeepHeight) as bool? ?? false;
var innerWidth = keepWidth ? constraint.Width : Math.Min(this._lastArrangeSize.Width, constraint.Width);
var innerHeight = keepHeight ? constraint.Height : Math.Min(this._lastArrangeSize.Height, constraint.Height);
base.MeasureOverride(new Size(innerWidth, innerHeight));
var outerWidth = keepWidth ? Child.DesiredSize.Width : 0;
var outerHeight = keepHeight ? Child.DesiredSize.Height : 0;
return new Size(outerWidth, outerHeight);
protected override Size ArrangeOverride(Size arrangeSize)
Debug.WriteLine("Arrange: " + arrangeSize);
if (_lastArrangeSize != arrangeSize)
_lastArrangeSize = arrangeSize;
base.MeasureOverride(arrangeSize);
return base.ArrangeOverride(arrangeSize);
这是我在 xaml 中使用它的方式：
<ScrollViewer>
<StackPanel Orientation="Vertical">
<Whatever />
<decorators:RestrictDesiredSizeDecorator MinWidth="100" KeepHeight="True">
<TextBox
Text="Binding Comment, UpdateSourceTrigger=PropertyChanged"
Height="Auto"
MaxHeight="360"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
AcceptsReturn="True"
AcceptsTab="True"
TextWrapping="WrapWithOverflow"
/>
</decorators:RestrictDesiredSizeDecorator>
<Whatever />
</StackPanel>
</ScrollViewer
上面创建了一个文本框，它将垂直增长（直到达到 MaxHeight），但将匹配父级的宽度而不增长外部 ScrollViewer。将窗口/ScrollViewer 调整为小于 100 宽将强制外部 ScrollViewer 显示水平滚动条。也可以使用其他带有内部 ScrollViewers 的控件，包括复杂的网格。
【讨论】：
以上是关于嵌套滚动区域的主要内容，如果未能解决你的问题，请参考以下文章