c# - 模拟 Windows 8 开始菜单磁贴布局引擎

Question

所以有人知道完美模拟 Windows 8 开始菜单磁贴布局引擎的示例代码或控件吗？

它应该支持混合方形和矩形瓷砖，并正确地将方形瓷砖重新包装在矩形瓷砖之上或之下。

注意:如果所有 TILES 都是正方形，则 WrapPanel 有效。但是，一旦混合了跨越 2 平方空间的图 block ，布局就会中断，并且与 Windows 8 开始菜单不一致

我期待扩展 WPF 面板的代码。

---

免责声明:是的，我已经在互联网上搜索过，我找到的最接近的是 CodeProject 示例，但只有当所有图 block 都是相同大小的正方形时才有效。

Answer 1

我环顾四周，找不到任何我/我们想做的事。我知道要获得这种行为，我们需要某种自定义面板对象，所以我着手创建一个...

归根结底，瓷砖需要垂直排列，双倍宽度的瓷砖在该列中占据一整行，正常宽度的瓷砖成对排列。当它到达容器底部时，需要创建一个新列并遵循相同的模式。

这是我的实现:

    public class MetroTilePanel : Panel
{
    protected override Size ArrangeOverride(System.Windows.Size finalSize)
    {
        double x = 0, y = 0, colWidth = 0, rowHeight = 0;
        int col = 0;
        colWidth = Children.Cast<UIElement>().Select(c => c.DesiredSize.Width).Max();

        foreach (UIElement child in Children)
        {
            rowHeight = Math.Max(rowHeight, child.DesiredSize.Height);

            if (x + child.DesiredSize.Width > (colWidth * (col + 1)))
            {
                // New row
                y += rowHeight;
                x = (colWidth * (col));
                rowHeight = child.DesiredSize.Height;
            }

            if (y + rowHeight > finalSize.Height)
            {
                // New column
                col++;
                x = (colWidth * (col));
                y = 0;
            }

            child.Arrange(new Rect(x, y, child.DesiredSize.Width, child.DesiredSize.Height));
            x += child.DesiredSize.Width;
        }
        return finalSize;
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        double x = 0, y = 0, colWidth = 0;

        foreach (UIElement child in Children)
        {
            child.Measure(availableSize);

            if (x + child.DesiredSize.Height > availableSize.Height)
            {
                x += colWidth;
                y = 0;
                colWidth = 0;
            }

            y += child.DesiredSize.Height;
            if (child.DesiredSize.Width > colWidth)
            {
                colWidth = child.DesiredSize.Width;
            }
        }
        x += colWidth;

        var resultSize = new Size();

        resultSize.Width = double.IsPositiveInfinity(availableSize.Width) ? x : availableSize.Width;
        resultSize.Height = double.IsPositiveInfinity(availableSize.Height) ? y : availableSize.Height;

        return resultSize;
    }
}

操作中的控件截图:

免责声明:

• MeasureOverride 只是偶然起作用，而且设置不正确。
• 如果您想要漂亮的 MetroTile 布局，请坚持使用统一尺寸，即 100x100 和 200x100
• 我还没有完全测试它，但我会在我的假 Metro 应用程序中实现它，所以如果你想看到任何 future 的变化，请大声疾呼。
• 如果您想要正确的 GridView 平铺行为，那么我们必须创建一个全新的控件(以支持拖动项目等)。

希望对您有所帮助。