c# - Emulates Windows 8 Start Menu Tile Layout Engine -


So what about any sample code or control that fully imitates the Windows 8 Start Menu tile layout engine Does it?

It should support mixed squares and rectangular tiles, and square tile properly over or over the rectangular tiles.

Note: If all the tiles are Square then the Rapaplan works. But once you are mixed in tiles, which are 2-square-space spaces, the layout breaks, and the windows 8 is incompatible with the start menu

I think the WPF panel The code that extends is expected.


Disclaimer: Yes, I searched the Internet, the closest thing I found is the CodeProject example, but it only works when all the tiles are the same size class.

I have seen myself around and do whatever I / we want to do Could not even get it. I knew that to get this behavior, we need some custom panel objects, so I set about creating one ...

How it boils, tiles Stacked arrangement requires double-width tiles to take a whole line in that column, and to add normal width tiles when it reaches the bottom of the container, make it a new column and make the same pattern Need to follow.

This is my implementation:

  Public class Metro tile panel: Panel {Safe Override Size ArrangeOverride (System.Windows.Size finalSize) {Double X = 0, y = 0, colWidth = 0, rowHeight = 0; Int col = 0; Colwidth = children Cast & lt; UIElement & gt; (). Select (C = & gt; c.DesiredSize.Width) .max (); Foreign children (UiIlement children in children) {Rohit = Math.max (line height, child.expected size. Hi); If (x + child.DesiredSize.Width> (colWidth * (col + 1))) // // new row y + = rowHeight; X = (colWidth * (cola)); Line = child. Set size height; } If (y + line height> last section.) {// new column call ++; X = (colWidth * (cola)); Y = 0; } children. Arrange (New Reset (X, Y, Child, Design Size, Width, Toddler. Desired Size High)); X + = child.DesiredSize.Width; } Return final size; } Protected override size Majorover color (Size Available Size) {Double X = 0, Y = 0, Colwell = 0; Exotic hair (UiIlement children in children) {Children. Measure (available size); If (x + child.DesiredSize.Height> availableSize.Height) {x + = colwidth; Y = 0; ColWidth = 0; } Y + = child.Defined size height; If (child.DesiredSize.Width> colWidth) {colWidth = child.DesiredSize.Width; }} X + = colwidth; Var result field = new size (); Resulted shape With = double. Is Positive Infiniti (Available Size.)? X: Available size. With; Resulted shape Het = double. What positive infinity (available size.)? Y: Available limit. Return result: size; }}   

Screenshot of control in action: Enter image details here

Disclaimer:

  • MeasureOverride works only from the spot, and is not setup correctly.
  • If you want a good metrotol layout, stick 100x100 and 200x100
  • I have not tested it altogether, but I have to apply it in my fake-metro app, So if you want to see any future changes, then just tilt
  • If you want a proper GridView tiling behavior, then we need to create a new control (to drag objects etc.).

    I hope this helps

Comments