嵌套滚动区域

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

问题出现了，因为Control内的ScrollViewer几乎没有可用的空间。因此，你的内部ListBox认为它可以通过占据显示其所有元素所需的完整高度来避免滚动。当然，在您的情况下，行为会产生过多的外部ScrollViewer的不良副作用。

因此，目标是让ListBox在ScrollViewer内使用可见高度，如果有足够的高度和其他最小高度。要实现这一点，最直接的方法是继承ScrollViewer并覆盖MeasureOverride()以传递适当大小的availableSize（即给定的availableSize炸毁到最小尺寸使用VisualChildrenCount和GetVisualChild(int)找到的Visual代替“通常”无穷大。

Answer 3

我使用了Daniel的解决方案。这很好用。谢谢。

然后我向装饰器类添加了两个布尔依赖属性：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的容器高度中减去它们的高度。在主窗口中调用此方法＆＃34;已加载＆＃34;和＆＃34;窗口调整大小＆＃34;事件处理程序。

这应该会给你两全其美。你给ListBox一个＆＃34;固定＆＃34;尽管主窗口有自己的滚动条，但它会导致滚动的大小。

Answer 6

for 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的答案。我决定发布整个解决方案，以使人们在需要时更容易采用此解决方案。这是我的装饰器类：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-num-grp="1" min="0" max="10" value="10"/>
<input type="number" data-num-grp="1" min="0" max="10" value="0"/>
<br/>
<input type="number" data-num-grp="2" min="0" max="10" value="10"/>
<input type="number" data-num-grp="2" min="0" max="10" value="0"/>

这是我在xaml中使用它的方式：

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

上面的代码创建了一个垂直增长的文本框（直到达到MaxHeight），但将与父级的宽度匹配，而不会增长外部ScrollViewer。将window / ScrollViewer的大小调整为小于100宽将迫使外部ScrollViewer显示水平滚动条。带有内部ScrollViewer的其他控件也可以使用，包括复杂的网格。