uwp - Gridview中的Variablesizedwrapgrid间距为ItemPanel

时间:2018-03-12 21:06:12

标签: uwp win-universal-app uwp-xaml

我正在努力制作一个瓷砖墙,就像Zune(MSFT制作的音乐播放器)一样。我正在关注Jerry Nixon's blog的指南。我正在使用从GridView和Variablesizedwrapgrid继承的自定义GridView,并设置GridView中每个项目的修复RowSpan和ColSpan以使它们不同。这是enter image description here的样子。

但是,总会留下一些空白空间,没有任何项目占用。

以下是自定义GridView的代码:

public class MyGridView : GridView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        try
        {
            dynamic _Item = item;
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, _Item.ColSpan);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, _Item.RowSpan);
        }
        catch
        {
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }

    }
}

这是GridView项目源的数据结构

public class Tile
{
    public BitmapImage Thumbnail { get; set; }

    public int index { get; set; }

    public object RowSpan { get; set; }

    public object ColSpan { get; set; }
}

所以基本上它是如何工作的,对于每个Tile,我们在创建Tile对象时修复了RowSpan和ColSpan集。当GridView为每个项目分配空间时,可以使用它们。有些瓷砖在4中有RowSpan和ColSpan,因此有4x4尺寸的瓷砖等等。

由于我们通过在渲染项目之前设置每个项目的RowSpan和ColSpan来预先定义每个项目的容器大小,因此剩余空间的原因。由于这些数字是固定的,如果项目太大而无法放入,则该项目将换行到下一列。

最直观的想法是让以下项目向前移动并占用空单元格,但它似乎在GridView中不起作用。然后我想在创建空白空间后让项目缩小但是它可能需要父容器知道它并告诉它的孩子,这是我所不知道的。

如果有人能给我一个提示或解决方案,我将不胜感激。谢谢

1 个答案:

答案 0 :(得分:0)

@jason_wun,我在msdn中找到了GridView中有关自动排列项目的类似问题。并且 Diederik Krols 已经提供了您可以参考的acceptable answer。以下是答案参考。

  

您可能希望使用CompositionProToolkit中的FluidWrapPanel,或查看其源代码以调整定位算法。