How do you resize de tiles so that you get 3 or 4 columns?

[schattenmann]

OK this is a pretty basic question which I’m embarrassing to even ask!

For a smartphone, and considering I want to quickly move from Imperihome, I’m happy to just go with the standard tiles design with little to no changes. Only thing I’d like to change is tiles dimensions so that I can have 3 (maybe 4) columns instead of 2.

I understand we can change the Designer / Simulator dimensions as well as the Tiles dimensions but something seems to be illuding me as I’m not being able to achieve the desired behaviour.

I have a 20:9 2400*1080px 402ppi smartphone. I obviously can’t use these dimensions on the Designer / Simulator else I’d end with a massive “screen” but I’ve set it to 1584 * 720 just to keep the same ratio.

Tiles are 180px width by default so that should mean you’d get 4 columns (lets ignore margins for now).

What happens when I hit “Start” is I get 3 tiles side by side which is OK but once published to my phone I still get the standard 2 tiles side by side design so clearly I’m missing the point.

[Tarkus (John Lattarulo)]

See

Can't understand new Height and Width settings

The Width & Height fields at the top are not your device’s pixel resolution. Those values are what Android calls “density-independent pixels (dp)” & what iOS calls “Points”. On the web it is sometimes referred to as “Viewport Size”. https://developer.android.com/training/multiscreen/screendensities https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html For iOS, there is a table in the Designer you can use to find the…

[schattenmann]

Thank you @Tarkus that helps a lot!

I’ve now set it to 423 x 941. Does that then means I need to update each individual tile height and width to the desired dimensions so that they can fit 3 side by side? Or is there a quicker way to do it?

[Jdamore]

I believe you’ll have to edit each individual template and there’s no way to mass edit. You only have to do it for the templates you’re using.

In the app settings, you can adjust Scaling. Play with that and see if it helps.

[Tarkus (John Lattarulo)]

Yeah, I understand you can use a text editor such as notepad ++ for some aspects of HR using search and replace but if you only have a handful of tiles I would just manually adjust the tiles you are using.

[bill (Bill Venhaus)]

@schattenmann

I’ve now set it to 423 x 941. Does that then means I need to update each individual tile height and width to the desired dimensions so that they can fit 3 side by side?

No. You cannot edit the size of each individual tile. They all have to be of uniform size. The only size adjustment you can make is the ColumnSpan. You can have tiles span multiple columns. The DesignWidth & DesignHeight are design time only settings that help you create & layout your XAML file. When using the built-in Groups navigation you cannot edit the tile size. The DeviceBrowser however does allow you to customize the tile size. It has TileWidth & TileHeight properties you can control. In a future release, I will probably add those properties to the individual Groups so you can control their size without needing a DeviceBrowser.

[schattenmann]

Ah that explains why I wasn’t being able to find those properties!

That would be great Bill, a way to quickly “set” how many columns you’d want would be a great add and, hopefully, not much of a hassle for you to add.

Thanks

[schattenmann]

Hey @bill wondering if you’re still considering this?

[bill (Bill Venhaus)]

Yes. I do plan on adding TileWidth & TileHeight to the individual Groups.

[schattenmann]

That’s great, thanks for letting me know