嵌套滚动区域

Question

我为 WPF 创建了一个控件，我有一个问题要请教各位 WPF 专家。

我希望我的控件能够扩展以适应可调整大小的窗口。

在我的控件中，我有一个想要随窗口展开的列表框。列表框周围还有其他控件（按钮、文本等）。

我希望能够在我的控件上设置最小尺寸，但我希望能够通过创建用于查看控件的滚动条来缩小窗口的大小。

这会创建嵌套滚动区域：一个用于列表框，一个 ScrollViewer 包裹整个控件。

现在，如果列表框设置为自动大小，它将永远不会有滚动条，因为它总是在 ScrollViewer 中以全尺寸绘制。

如果内容不能变小，我只希望控件滚动，否则我不想滚动控件；相反，我想滚动控件内的列表框。

如何更改 ScrollViewer 类的默认行为？我尝试从 ScrollViewer 类继承并覆盖 MeasureOverride 和 ArrangeOverride 类，但我无法弄清楚如何正确测量和安排孩子。看来排列必须以某种方式影响 ScrollContentPresenter，而不是实际的内容子项。

任何帮助/建议将不胜感激。

Answer 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>

Answer 2

问题出现了，因为ScrollViewer 中的Controls 几乎有无限的可用空间。因此，您的内部ListBox 认为它可以通过占用显示所有元素所需的完整高度来避免滚动。当然，在您的情况下，这种行为会产生不必要的副作用，即过度使用外部 ScrollViewer。

因此，目标是让ListBox 使用ScrollViewer 内的可见 高度，前提是它有足够的高度，否则为某个最小高度。要实现这一点，最直接的方法是从ScrollViewer 继承并覆盖MeasureOverride() 以传递适当大小的availableSize（即给定的availableSize 被放大到最小大小而不是“通常的”无穷大）到使用VisualChildrenCount 和GetVisualChild(int) 找到的Visuals。

Answer 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);
}

Answer 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 以防止这种调整大小？

Answer 5

在代码隐藏中创建一个方法，将 ListBox 的 MaxHeight 设置为包含它的任何控件和其他控件的高度。如果列表框在其上方或下方有任何控件/边距/填充，请从分配给 MaxHeight 的容器高度中减去它们的高度。在主窗口“加载”和“窗口调整大小”事件处理程序中调用此方法。

这应该给你两全其美。尽管主窗口有自己的滚动条，但您正在给 ListBox 一个“固定”大小，这将导致它滚动。

Answer 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>

Answer 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 的控件，包括复杂的网格。