Multi-Entry Wrapping Xaml Grid

Question

In a UWP app, I want to have a dynamic layout of a XAML Grid style control that will use all the horizontal space available of the screen. For example when I am on a small screen like a phone, I want the list to simply scroll down the screen like this.

However, when I am on a wider screen I would like the layout to adapt similar to the following screen shot:

Any suggestions on what Visual Studio 2015 UWP controls I can use to accomplish this?? I am thinking of maybe a VariableSizedWrapGrid and Grid control combination but I cannot seem to figure it out. Any suggestions would be appreciated.

EDIT: Not all the items will be the same size. Some device names will be longer and wrap to two lines and I need the control to handle the different item size, and have the desired one column / two column / three column etc layout based on screen size.

Answer 1

From the screenshots you show, all your items have the same size so there is no reason to use the VariableSizedWrapGrid. Simply use a GriView control and it will automatically wrap the items like you're describing:

• on a small screen all items are stacked vertically
• on a wider screen, the items flow horizontally and wrap to the next line according to the available width and the width of a single item.

1 2 3

4 5 6

7

<GridView ItemsSource="{Binding YourItems}"
          ItemTemplate="{StaticResource YourItemTemplate}">

The layout of a single item is specified in the YourItemTemplate DataTemplate and you're all set.

---

Update: As the question changed to variable sized items, it got a lot more complex.

• ListView provides auto-scaling for different heights of your item; but is limited to a single column.
• VariableSizedWrapGrid needs 'assignment' of # rows/columns used. For maximum flexibility you can have cell have a 1px height (beware of performance hits!!) and assign whatever height you need. Therefore you'd need to add some calculations and you're not 100% sure how many lines your text will take to render (although you can make good guesses based on # of characters).

I've used the 2nd approach before for a completely flexible layout, but it was not always 100% perfect (since an M takes more space than an I on most fonts). Unless you want to take that into account as well when calculating the size.

There are plenty of other hacks like rendering the textbox outside of the visible screen (e.g. coordinates -500/-500), check what size it rendered on and use that for the VariableSizedWrapGrid, but where does it end if you go down that path?

My conclusion would be: keep it simple.

• Either use an easy calculation (e.g. > 80 chars = 2 lines) to determine whether you need a small or large tile.
• Provide 2 lines by default for the device name, if it's short, it will use only 1 line and have the rest of the content bottom aligned.
• Provide 1 line for the device name and trim the text if it's longer. You can use the full name on the detail page.

I'd pick either 2 or 3, because it's easier to implement and because tiles of the same size give a better overview (aligned text) than variable sized tiles.