Enforcing square proportions in XAML

In my current Windows 8 project, I needed an object on the screen to resize with screen size – and keep it’s proportions. Turned out to be a bit trickier than I thought…

What I wanted was this:

correct

 

I had to have it as Stretch alignment to scale with the screen size, so fixed Width/Height was out of the question. The starting point was to have VerticalAlignment=Stretch to always use a third of the screen height, but what about the Width?

I started by binding the circle Width to it’s ActualHeight, as:

 

That looked good at first, but running it yielded empty:

actualheight

Ok, weird. The binding is OneWay and not OneTime, so it really should be updating itself continously.

Anyway, let’s try to bind to Height in instead of ActualHeight.

height

Wow, that oddly enough did not seem to work.

So, what did finally work?

Well, after talking to my buddy Håkan Reis, we tried just binding it to not itself, but a parent object: the RowDefinition of the middle row.

 

And that did it! Circles resize nicely, and uniformly.

/A

This Post Has 4 Comments

  1. thank! it works. (wp 8.1 uniapp)

    1. Glad to hear!

Leave a Reply

Close Menu