Creating Square Or aspect ratio element


i want to create a view which has percentage width value and it’s height should be in some ratio to it’s width value.
if device screen width is 200 and a view has 50% width and ratio is 1:1 then it’s height should be 100.
in general , i simply need to create a square view with percentage width value.
any help will be appriciated.


I don’t have an explicit answer for you, but this is an interesting use case. I’m wondering if you would start by setting the width property to 50% in your markup, and then in the loaded event get the width size of the layout container, and set the height based on that in code.


yeah that is one way to do it. but there is 2 problems with that approach.

  1. when screen orientation changes it will not work as expected.
  2. if using with large lists and ListView when user scroll to element , it will not displayed and will display after some time. because height will be initially 0.

does anybody have idea for workaround in this problem?


We obviously can’t guess what you think is actually the expected behavior. An example that demonstrates the issue will be easy for anyone to understand and give you a fix or guide you with right approach. Try playground.