WPF/Metro样式:使ListView只显示完整的项目



在我的Metro应用程序中,我有一个数据源,其中包含一定数量的项目(比如25个)。我有一个ListView来显示这些项目。我的问题是ListView的大小允许它显示6.5个项目,所以它显示的最后一个项目被切成两半。如果分辨率发生变化,它可能会显示4个项目,或8.2个项目,或者其他任何项目。我希望ListView能够准确地显示符合控件高度的项目数,而不是剪裁最后一个项目。

现在,我看到了两种可能的半解决方案,没有一种是最优的:

  1. 将ListView的高度设置为固定高度,该高度是项目大小的倍数。这不会随着分辨率的变化而缩放。

  2. 限制数据源中的项目数。这也不成比例。

因此,我的问题是,如何让ListView只显示完整的项目(所有边都在视口/ListView内的项目),而隐藏其余项目?

ListView继承自ItemsControl,因此,一个更优化的解决方案是在ItemsPanel 中注入自定义面板(通过自定义剪裁显示覆盖度量)

类似这样的东西(对不起,我没有尝试编译):

protected override Size MeasureOverride(Size constraint)
{
 if (this.VisualChildrenCount <= 0)
  return base.MeasureOverride(constraint);
 var size = ne Size(constraint.Width,0);
 for(int i = 0; i < this.visualChildrenCount; i++)
 {
  child.Measure(size);
  if(size.height + child.desiredSize > constraint.height)
   break;
  size.Height += child.DesiredSize;
 }
 return size;
}

我的最终解决方案是结合@NovitchiS和@JesuX的建议。

我创建了一个堆栈面板覆盖,并听取了LayoutUpdated事件。我的最终解决方案:

class HeightLimitedStackPanel : StackPanel
{
    public HeightLimitedStackPanel() : base()
    {
        this.LayoutUpdated += OnLayoutUpdated;
    }
    double GetSizeOfVisibleChildren(double parentHeight)
    {
        double currentSize = 0;
        bool hasBreaked = false;
        for (int i = 0; i < Children.Count; i++)
        {
            var child = Children[i];
            if (currentSize + child.DesiredSize.Height > parentHeight)
            {
                hasBreaked = true;
                break;
            }
            currentSize += child.DesiredSize.Height;
        }
        if (hasBreaked) return currentSize;
        return parentHeight;
    }
    double ParentHeight
    {
        get 
        {
            ItemsPresenter parent = VisualTreeHelper.GetParent(this) as ItemsPresenter;
            if (parent == null)
                return 0;
            return parent.ActualHeight;
        }
    }
    double previousHeight = 0;
    int previousChildCount = 0;
    protected void OnLayoutUpdated(object sender, object e)
    {
        double height = ParentHeight;
        if (height == previousHeight && previousChildCount == Children.Count) return;
        previousHeight = height;
        previousChildCount = Children.Count;
        this.Height = GetSizeOfVisibleChildren(height);
    }
}

@JesuX的答案是更好的方法——如果做得正确的话。以下ListView子类对我来说很好:

public sealed class IntegralItemsListView : ListView
{
    protected override Size MeasureOverride(Size availableSize)
    {
        Size size = base.MeasureOverride(availableSize);
        double height = 0;
        if (Items != null)
        {
            for (int i = 0; i < Items.Count; ++i)
            {
                UIElement itemContainer = (UIElement)ContainerFromIndex(i);
                if (itemContainer == null)
                {
                    break;
                }
                itemContainer.Measure(availableSize);
                double childHeight = itemContainer.DesiredSize.Height;
                if (height + childHeight > size.Height)
                {
                    break;
                }
                height += childHeight;
            }
        }
        size.Height = height;
        return size;
    }
}

需要注意的是,如果将IntegralItemsListView放入Grid,它将具有

VerticalAlignment="Stretch"

默认情况下,这违背了此类的目的。

此外:如果物品高度一致,方法显然可以简化:

protected override Size MeasureOverride(Size availableSize)
{
    Size size = base.MeasureOverride(availableSize);
    size.Height = (int)(size.Height / ItemHeight) * ItemHeight;
    return size;
}

最新更新