uwp

Question

我正在尝试像 Zune（MSFT 制作的音乐播放器）那样制作 Tile 墙。我正在遵循 Jerry Nixon's blog. I'm using a custom GridView inherit from GridView and Variablesizedwrapgrid and setting fix RowSpan and ColSpan of every items in the GridView to make them different. Here is how it looks like.

的指南

但是，总有一些空的 space 剩下，没有项目占据它。

这里是自定义 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的item源的数据结构

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 为每个项目分配 space 时，可以使用它们。有些图块有 4 个 RowSpan 和 ColSpan，因此有一个 4x4 大小的图块等等。

之所以剩下space，是因为我们在渲染item之前，通过设置每个item的RowSpan和ColSpan，预先定义了每个item的容器大小。由于这些数字是固定的，如果项目太大而不适合放入下一列。

最直观的想法是让后面的项目向前移动并占据空单元格，但它在 GridView 中似乎不起作用。然后我想在创建空 space 后缩小项目，但它可能需要父容器知道它并告诉它的子容器，这超出了我的知识范围。

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

Answer 1

@jason_wun，我在msdn的GridView中发现了关于自动排列项目的类似问题。 Diederik Krols 提供了 acceptable answer 供您参考。以下为答案参考。

You may want to use the FluidWrapPanel from CompositionProToolkit instead, or look at its source code to adjust your positioning algorithm.

uwp - Gridview 中的 Variablesizedwrapgrid Spacing 作为 ItemPanel

uwp - Variablesizedwrapgrid Spacing in Gridview as ItemPanel

win-universal-app

uwp-xaml