Windows Phone Xaml: Force square proportioned container (aspectratio 1:1)

Question

I need a container with square shape, but it has to be as big as it cans, but without be bigger of the parent.

I tried with the choosen answer from here: WPF dynamic layout: how to enforce square proportions (width equals height)?

but it creates a square bigger than the parent, what I need is a square that fits with the parent (like when you put in an image Stretch=Uniform).

score 1 · Answer 1 · answered Apr 14 '15 at 07:08

1

You could try something like this:

<Grid x:Name="outer" Background="Cyan" Width="200" Height="400">
    <Grid Background="Red" HorizontalAlignment="Stretch" Height="{Binding Path=ActualWidth, ElementName=outer}">
    </Grid>
</Grid>

Screenshot

answered Apr 14 '15 at 07:08

Decade Moon

32,968
8
81
101

Fine, but, if the user rotates the phone it doesn't work well (work well in your example because there is a fixed size, but obviously I need it without a fixed size) :-/ – Black Cid Apr 14 '15 at 09:24

J3soon · Answer 2 · 2017-04-30T06:17:08.567

I figured out a way to make the square smaller than the parent by using MaxWidth and MaxHeight.

<Grid Background="Blue">
    <Grid Background="Red"
        MaxWidth="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType=Grid}}"
        MaxHeight="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType=Grid}}">
    </Grid>
</Grid>

The parent Grid fits the whole screen, and the child Grid keeps its aspect ratio even on rotation.

EDIT :

Or simply use ViewBox

<Grid Background="Blue">
    <Viewbox Stretch="Uniform">
        <Grid Background="Red" MinWidth="1" MinHeight="1">
        </Grid>
    </Viewbox>
</Grid>

You can use this for any aspect ratio by changing the MinWidth and MinHeight of the inner Grid

Windows Phone Xaml: Force square proportioned container (aspectratio 1:1)

2 Answers2

Linked