wpf - 将 StackPanel 的宽度限制为最小的子元素

Question

如何将垂直 WPFStackPanel的宽度限制为它包含的最窄项目。的StackPanel宽度不得大于任何其他子元素的宽度。

Answer 1

不幸的是，IValueConverter方法并不总是有效；例如，如果将子项静态添加到StackPanel ，则子集合在绑定时将为空（所以我发现）。最简单的解决方案是创建一个自定义面板：

public class ConstrainedStackPanel : StackPanel
{
    public ConstrainedStackPanel()
    {
    }

    protected override Size MeasureOverride(Size constraint)
    {
        foreach (var item in this.Children)
        {
            // FrameworkElement has the Width property we care about.
            FrameworkElement element = item as FrameworkElement;
            if (element != null)
                constraint.Width = Math.Min(element.Width, constraint.Width);
        }

        return base.MeasureOverride(constraint);
    }

    protected override Size ArrangeOverride(Size arrangeSize)
    {
        foreach (var item in this.Children)
        {
            // FrameworkElement has the Width property we care about.
            FrameworkElement element = item as FrameworkElement;
            if (element != null)
                arrangeSize.Width = Math.Min(element.Width, arrangeSize.Width);
        }

        return base.ArrangeOverride(arrangeSize);
    }
}

您可以使用如下 XAML 所示的面板：

<StackPanel Margin="5">
    <TextBlock Text="StackPanel:" FontWeight="Bold" />
    <StackPanel x:Name="panelA">
        <Button Width="100" Content="100" />
        <Button Width="200" Content="200" />
        <Button Width="300" Content="300" />
        <Button Width="400" Content="400" />
    </StackPanel>
    <TextBlock Text="ConstrainedStackPanel:" FontWeight="Bold" Margin="0,10,0,0" />
    <l:ConstrainedStackPanel x:Name="panelB">
        <Button Width="100" Content="100" />
        <Button Width="200" Content="200" />
        <Button Width="300" Content="300" />
        <Button Width="400" Content="400" />
    </l:ConstrainedStackPanel>
</StackPanel>

这将呈现如下内容：

我希望这有帮助。

Answer 2

你不能。垂直方向的StackPanel总是分配与其子请求一样多的宽度。

你最好写一个自定义面板来实现你想要的行为。

Answer 3

我已经尝试绑定到 ActualWidth 属性，甚至创建了一个转换器来抵消该值，这很好用，但有一个例外：当您扩展容器的大小时，宽度会正确更新，但是当使容器更小时，实际内容的宽度变小，但任何滚动查看器的“页面宽度”都不会。我确定有办法解决这个问题，但我还没有找到。