模拟Windows 8开始菜单平铺布局引擎 [英] Emulates Windows 8 Start Menu Tile Layout Engine

问题描述

所以那里的人都知道的示例代码或控制完美地模拟Windows 8开始菜单tile布局引擎？

So anyone out there knows of sample code or control that perfectly emulates the Windows 8 Start Menu Tile Layout Engine?

应该支持混合广场和矩形Tiles和。过高或过低长方形砖正确重新组合广场砖

It should support mixed Square and Rectangle Tiles, and repacks the square tiles over or under rectangle tiles properly.

请注意：WrapPanel工作，如果全部平铺均为广场。但是，一旦你在跨越2平方价值空间，布局休息瓷砖混合，并与Windows 8的开始菜单

Note: WrapPanel works if ALL TILES are Square. But once you mix in tiles that span 2-Squares worth of space, the layout breaks, and is inconsistent with the Windows 8 Start Menu

我期待扩展代码。WPF面板

I am expecting code that extends the WPF Panel.

免责声明：是的，我在网​​上搜索，我发现的最接近的就是CodeProject上的例子，但是，只有工作，如果全部平铺均为相同尺寸的正方形。

Disclaimer: Yes I have searched the Internet, the closest thing I've found is the CodeProject example, but that only works if all tiles are same-sized squares.

推荐答案

我看着自己周围，找不到任何东西做我/我们想要的。我知道，要获得这一行为，我们会需要某种自定义面板的对象，所以我开始着手制作一个...

I've looked around myself and couldn't find anything to do what I/we want. I knew that to get this behavior we'd need some sort of custom panel object, so I set about creating one...

什么把它归结为，是瓷砖需要被垂直地布置，以双宽度瓦片占用整个行中的该列中，而正常宽度瓦片配对。当它到达容器的底部，它需要创建一个新的列，并遵循相同的模式。

What it boils down to, is the tiles need to be arranged vertically, with double-width tiles taking up a whole row in that column, and normal width tiles to pair up. When it reaches the bottom of the container, it needs to create a new column and follow the same pattern.

下面是我实现的：

    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;
    }
}

在动作控制的截图：

Screenshot of the control in action:

免责声明：

• 的唯一的MeasureOverride偶然的作品，而不是设置正确。


• 如果你想要漂亮的Metrotile屋面瓦兼有布局，然后坚持统一尺寸100×100，即和黑白200x100


• 我还没有完全测试，但我会实现它变成我的假，地铁的应用程序，所以如果你想看到的任何未来的变化，只是发牢骚。


• 如果你想正确的GridView的平铺行为，那么我们就必须创建一个全新的控制（支持拖动鼠标等项目）。

• The MeasureOverride only works by chance, and isn't setup correctly.
• If you want the nice MetroTile layout, then stick to uniform sizes i.e 100x100 and 200x100
• I haven't fully tested it, but I will be implementing it into my fake-Metro app, so if you want to see any future changes, just holler.
• If you want the proper GridView tiling behavior, then we'd have to create a brand new control (to support dragging items around etc).

我希望这有助于。

这篇关于模拟Windows 8开始菜单平铺布局引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！