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:



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:

Width="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"


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


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.


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.


Width="{Binding ActualHeight, ElementName=middleRow, Mode=OneWay}"


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


This Post Has 4 Comments

  1. name

    thank! it works. (wp 8.1 uniapp)

    1. Andreas Hammar

      Glad to hear!

Leave a Reply