Width equal to Height

If I have a Panel with a Width of 100% of the screen, how can I set the Height equals to the value of Width (I want a square Panel of 100% of screen width but the screen height of the devices are diferent).


There’s unfortunately no easy way to do this right now. You’ll have to use some Uno code, and likely a custom control to do the layout.

Can you give me an example of what you have now and tell me which part you’d like to have with a fixed aspect ratio? I can then maybe look at putting together an example for you.

But better make a simpler example instead of upload my project that have many things.

If you have time, how can I do something like this:

<Image ux:Name"MyImage" WidthUnit="Percent" Width="90" StretchMode="UniformToFill" />

How can in Uno make that the MyImage.Height = MyImage.Width?

I know this is out of date but maybe it will help other people who run into the problem. Here’s a solution that solves a similar problem, relying on a square transparent image to set the proper aspect ratio of the container (width=height) and then “floating” on top of it the actual content you want to display:

We’ve actually added an aspect layout option since then.

<Panel Width="100%" BoxSizing="FillAspect" Aspect="1">

The panel will be the same height as the width. The key bit is BoxSizing="FillAspect" Aspect="1" which enables aspect based sizing (to fill the space that is has, or with an explicit width/height). The Aspect is the X/Y ratio.

Nice. Keep up the good work!