Fluid squares

How-to Discussions
1

Probably a very easy question, but I can’t figure it out. How can I make squares with dynamic height? I came across this article but in my case I’m not having static width and height

With the code below I get 4 columns stretch out over the full device width, but how to set the height equal to the width so I get squares?

<Panel>
   <ColumnLayout Sizing="Fill" ColumnCount="4" ColumnSpacing="1"/>
   <Each Count="20">
	   <Panel Margin="0,1,0,0" Width="100%" Height="??" Color="Red"/>
   </Each>
</Panel>
2

Hi!

You can assign an aspect to your elements like this:

<Panel Width="100%" Aspect="1" BoxSizing="FillAspect" /> <!-- Aspect of 1 to get a square -->
3

Works great! Thanks Kristian!