Creating Square Or aspect ratio element


#1

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.


#2

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.


#3

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?


#4

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.