填充可见 space 时收缩项目控制项目

Question

我想创建一个数据绑定的水平布局 ItemsControl，其中每个项目都会有一个 Button。当我向集合中添加新项目时，ItemsControl 应该相对于它所在的 Window 增长，直到达到 MaxWidth 属性。那么所有的按钮都应该同样收缩以适应 MaxWidth。类似于 Chrome 浏览器的选项卡。

带有 space 的制表符：

没有空的制表符space:

到目前为止我已经做到了：

    <ItemsControl Name="ButtonsControl" MaxWidth="400">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type dataclasses:TextNote}">
                <Button Content="{Binding Title}" MinWidth="80"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

添加项目时，StackPanel 和 Window 的扩展很好，但是当达到 MaxWidth 时，项目才开始消失。

Answer 1

我认为使用标准 WPF 控件的任意组合都不可能产生这种行为，但这个自定义 StackPanel 控件应该可以完成这项工作：

public class SqueezeStackPanel : Panel
{
    private const double Tolerance = 0.001;

    public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register
        ("Orientation", typeof (Orientation), typeof (SqueezeStackPanel),
            new FrameworkPropertyMetadata(Orientation.Horizontal, FrameworkPropertyMetadataOptions.AffectsMeasure,
                OnOrientationChanged));

    private readonly Dictionary<UIElement, Size> _childToConstraint = new Dictionary<UIElement, Size>();
    private bool _isMeasureDirty;
    private bool _isHorizontal = true;
    private List<UIElement> _orderedSequence;
    private Child[] _children;

    static SqueezeStackPanel()
    {
        DefaultStyleKeyProperty.OverrideMetadata
            (typeof (SqueezeStackPanel),
                new FrameworkPropertyMetadata(typeof (SqueezeStackPanel)));
    }

    protected override bool HasLogicalOrientation
    {
        get { return true; }
    }

    protected override Orientation LogicalOrientation
    {
        get { return Orientation; }
    }

    public Orientation Orientation
    {
        get { return (Orientation) GetValue(OrientationProperty); }
        set { SetValue(OrientationProperty, value); }
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        var size = new Size(_isHorizontal ? 0 : finalSize.Width, !_isHorizontal ? 0 : finalSize.Height);

        var childrenCount = Children.Count;

        var rc = new Rect();
        for (var index = 0; index < childrenCount; index++)
        {
            var child = _orderedSequence[index];

            var childVal = _children[index].Val;
            if (_isHorizontal)
            {
                rc.Width = double.IsInfinity(childVal) ? child.DesiredSize.Width : childVal;
                rc.Height = Math.Max(finalSize.Height, child.DesiredSize.Height);
                size.Width += rc.Width;
                size.Height = Math.Max(size.Height, rc.Height);
                child.Arrange(rc);
                rc.X += rc.Width;
            }
            else
            {
                rc.Width = Math.Max(finalSize.Width, child.DesiredSize.Width);
                rc.Height = double.IsInfinity(childVal) ? child.DesiredSize.Height : childVal;
                size.Width = Math.Max(size.Width, rc.Width);
                size.Height += rc.Height;
                child.Arrange(rc);
                rc.Y += rc.Height;
            }
        }

        return new Size(Math.Max(finalSize.Width, size.Width), Math.Max(finalSize.Height, size.Height));
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        for (var i = 0; i < 3; i++)
        {
            _isMeasureDirty = false;

            var childrenDesiredSize = new Size();

            var childrenCount = Children.Count;

            if (childrenCount == 0)
                return childrenDesiredSize;

            var childConstraint = GetChildrenConstraint(availableSize);

            _children = new Child[childrenCount];

            _orderedSequence = Children.Cast<UIElement>().ToList();

            for (var index = 0; index < childrenCount; index++)
            {
                if (_isMeasureDirty)
                    break;

                var child = _orderedSequence[index];

                const double minLength = 0.0;
                const double maxLength = double.PositiveInfinity;

                MeasureChild(child, childConstraint);

                if (_isHorizontal)
                {
                    childrenDesiredSize.Width += child.DesiredSize.Width;
                    _children[index] = new Child(minLength, maxLength, child.DesiredSize.Width);
                    childrenDesiredSize.Height = Math.Max(childrenDesiredSize.Height, child.DesiredSize.Height);
                }
                else
                {
                    childrenDesiredSize.Height += child.DesiredSize.Height;
                    _children[index] = new Child(minLength, maxLength, child.DesiredSize.Height);
                    childrenDesiredSize.Width = Math.Max(childrenDesiredSize.Width, child.DesiredSize.Width);
                }
            }

            if (_isMeasureDirty)
                continue;

            var current = _children.Sum(s => s.Val);
            var target = GetSizePart(availableSize);

            var finalSize = new Size
                (Math.Min(availableSize.Width, _isHorizontal ? current : childrenDesiredSize.Width),
                    Math.Min(availableSize.Height, _isHorizontal ? childrenDesiredSize.Height : current));

            if (double.IsInfinity(target))
                return finalSize;

            RecalcChilds(current, target);

            current = 0.0;
            for (var index = 0; index < childrenCount; index++)
            {
                var child = _children[index];

                if (IsGreater(current + child.Val, target, Tolerance) &&
                    IsGreater(target, current, Tolerance))
                {
                    var rest = IsGreater(target, current, Tolerance) ? target - current : 0.0;
                    if (IsGreater(rest, child.Min, Tolerance))
                        child.Val = rest;
                }

                current += child.Val;
            }

            RemeasureChildren(finalSize);

            finalSize = new Size
                (Math.Min(availableSize.Width, _isHorizontal ? target : childrenDesiredSize.Width),
                    Math.Min(availableSize.Height, _isHorizontal ? childrenDesiredSize.Height : target));

            if (_isMeasureDirty)
                continue;

            return finalSize;
        }

        return new Size();
    }

    public static double GetHeight(Thickness thickness)
    {
        return thickness.Top + thickness.Bottom;
    }

    public static double GetWidth(Thickness thickness)
    {
        return thickness.Left + thickness.Right;
    }

    protected override void OnVisualChildrenChanged(DependencyObject visualAdded, DependencyObject visualRemoved)
    {
        base.OnVisualChildrenChanged(visualAdded, visualRemoved);

        var removedUiElement = visualRemoved as UIElement;

        if (removedUiElement != null)
            _childToConstraint.Remove(removedUiElement);
    }

    private Size GetChildrenConstraint(Size availableSize)
    {
        return new Size
            (_isHorizontal ? double.PositiveInfinity : availableSize.Width,
                !_isHorizontal ? double.PositiveInfinity : availableSize.Height);
    }

    private double GetSizePart(Size size)
    {
        return _isHorizontal ? size.Width : size.Height;
    }

    private static bool IsGreater(double a, double b, double tolerance)
    {
        return a - b > tolerance;
    }

    private void MeasureChild(UIElement child, Size childConstraint)
    {
        Size lastConstraint;
        if ((child.IsMeasureValid && _childToConstraint.TryGetValue(child, out lastConstraint) &&
                lastConstraint.Equals(childConstraint))) return;

        child.Measure(childConstraint);
        _childToConstraint[child] = childConstraint;
    }

    private static void OnOrientationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var panel = (SqueezeStackPanel) d;
        panel._isHorizontal = panel.Orientation == Orientation.Horizontal;
    }

    private void RecalcChilds(double current, double target)
    {
        var shouldShrink = IsGreater(current, target, Tolerance);

        if (shouldShrink)
            ShrinkChildren(_children, target);
    }

    private void RemeasureChildren(Size availableSize)
    {
        var childrenCount = Children.Count;
        if (childrenCount == 0)
            return;

        var childConstraint = GetChildrenConstraint(availableSize);
        for (var index = 0; index < childrenCount; index++)
        {
            var child = _orderedSequence[index];
            if (Math.Abs(GetSizePart(child.DesiredSize) - _children[index].Val) > Tolerance)
                MeasureChild(child, new Size(_isHorizontal ? _children[index].Val : childConstraint.Width,
                    !_isHorizontal ? _children[index].Val : childConstraint.Height));
        }
    }

    private static void ShrinkChildren(IEnumerable<Child> children, double target)
    {
        var sortedChilds = children.OrderBy(v => v.Val).ToList();
        var minValidTarget = sortedChilds.Sum(s => s.Min);
        if (minValidTarget > target)
        {
            foreach (var child in sortedChilds)
                child.Val = child.Min;
            return;
        }
        do
        {
            var tmpTarget = target;
            for (var iChild = 0; iChild < sortedChilds.Count; iChild++)
            {
                var child = sortedChilds[iChild];
                if (child.Val*(sortedChilds.Count - iChild) >= tmpTarget)
                {
                    var avg = tmpTarget/(sortedChilds.Count - iChild);
                    var success = true;
                    for (var jChild = iChild; jChild < sortedChilds.Count; jChild++)
                    {
                        var tChild = sortedChilds[jChild];
                        tChild.Val = Math.Max(tChild.Min, avg);

                        // Min constraint skip success expand on this iteration
                        if (Math.Abs(avg - tChild.Val) <= Tolerance) continue;

                        target -= tChild.Val;
                        success = false;
                        sortedChilds.RemoveAt(jChild);
                        jChild--;
                    }
                    if (success)
                        return;

                    break;
                }
                tmpTarget -= child.Val;
            }
        } while (sortedChilds.Count > 0);
    }

    private class Child
    {
        public readonly double Min;
        public double Val;

        public Child(double min, double max, double val)
        {
            Min = min;
            Val = val;

            Val = Math.Max(min, val);
            Val = Math.Min(max, Val);
        }
    }
}

尝试将其用作您的 ItemsPanelTemplate：

<ItemsControl Name="ButtonsControl" MaxWidth="400">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:SqueezeStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type dataclasses:TextNote}">
            <Button Content="{Binding Title}" MinWidth="80"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

根据您提供的代码，我无法确定，但我认为通过删除 ItemsControl 上的 MaxWidth，您将获得更好的布局结果。

Answer 2

您可以使用 UniformGrid 和 Rows="1" 实现类似的效果。问题是你可以拉伸也可以不拉伸，这些选项都不会完全满足你的要求：

如果它被拉伸，那么您的 "tabs" 将始终填满整个可用宽度。所以，如果你只有 1 个，它将被拉伸到整个宽度。如果您为 "tab" 设置 MaxWidth，那么如果您有 2 个，它们将不会相邻，而是每个浮动在其列的中间。
如果它是左对齐的，那么将很难在您的控件中得到任何 padding/margin，因为当它收缩时，填充将保留，使实际内容不可见。

所以基本上你需要一个宽度为 "preferred" 的控件：

当可用宽度超过此首选宽度时 space，它会将自己设置为首选宽度。
当它的 space 较少时，它会占用它所有的 space。

这无法使用 XAML 实现（据我所知），但在代码隐藏中并不难做到。让我们为 "tab"（省略名称space）创建一个自定义控件：

<ContentControl x:Class="WpfApplication1.UserControl1">
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <Border BorderBrush="Black" BorderThickness="1" Padding="0,5">
                <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
            </Border>
        </ControlTemplate>
    </ContentControl.Template>

后面的代码：

public partial class UserControl1 : ContentControl
{
    public double DefaultWidth
    {
        get { return (double)GetValue(DefaultWidthProperty); }
        set { SetValue(DefaultWidthProperty, value); }
    }
    public static readonly DependencyProperty DefaultWidthProperty =
        DependencyProperty.Register("DefaultWidth", typeof(double), typeof(UserControl1), new PropertyMetadata(200.0));

    public UserControl1()
    {
        InitializeComponent();
    }

    protected override Size MeasureOverride(Size constraint)
    {
        Size baseSize = base.MeasureOverride(constraint);
        baseSize.Width = Math.Min(DefaultWidth, constraint.Width);
        return baseSize;
    }

    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        Size baseBounds = base.ArrangeOverride(arrangeBounds);
        baseBounds.Width = Math.Min(DefaultWidth, arrangeBounds.Width);
        return baseBounds;
    }
}

然后，您可以创建 ItemsControl，使用 UniformGrid 作为容器：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:UserControl1 Content="{Binding}" Margin="0,0,5,0" DefaultWidth="150"></local:UserControl1>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" HorizontalAlignment="Left"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

这是包含 3 项和许多项的结果的屏幕截图（不想计算它们:)

填充可见 space 时收缩项目控制项目

Shrink ItemsControl items when visible space is filled

c#

data-binding

wpf

itemscontrol