How to get perfect square with ImageCropper

[jhariel8]

Hello,

I'm working on a project in which we need to have an image that is either taken or uploaded by a user cropped to a perfect square. I thought that setting the aspect ratio to 1.0 would accomplish this; however, when I open the picture (a 1920x1080 photo), the crop box fits to the image. When I shrink the crop box, it makes an elongated rectangle instead of a square. Is there a way to make the crop box a rectangle and keep it in that shape?

For reference, here is my XAML:

`

<Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="70"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="600"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<controls:ImageCropper x:Name="imgCropper" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="{Binding Path=CROPPER_MAX_HEIGHT, ElementName=mainGrid}"></controls:ImageCropper>
<Grid Grid.Row="2" Grid.ColumnSpan="3" Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width=".8*"></ColumnDefinition>
        <ColumnDefinition Width=".8*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button x:Name="Cancel" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Content="{x:Bind Path=i18n:Translator.Instance.GetValue('Cancel'), Mode=OneWay}" Style="{StaticResource BaseButtonUWP}"></Button>
    <Button x:Name="Done" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Content="{x:Bind Path=i18n:Translator.Instance.GetValue('Done'), Mode=OneWay}" Style="{StaticResource BaseButtonUWP}"></Button>
</Grid>

`

The aspect ratio is set in the code-behind to 1.0.

I would appreciate any thoughts or suggestions!

[michael-hawker]

@HHChaos any thoughts here?

I think I got it to reproduce by chance in the store app by loading a custom picture with a landscape size, but I can't reproduce again. Wondering if there's a timing thing that may be in here somewhere?

@jhariel8 is our sample from our sample app working for you on your machine if you load your image?

[HHChaos]

@jhariel8 I haven't tested it yet, but if you can provide a complete simple example maybe it will help to find the cause of this bug.

[jhariel8]

@michael-hawker @HHChaos I haven't tried it with the sample app, but I can do that and let you know the results tomorrow. Thanks for the quick response!

[jhariel8]

Ok, I was able to reproduce it a couple of times in the sample app, but as @michael-hawker said, it seemed random and not easily reproducible. So I can't give you any specific steps to get it to happen.

I've created a very simple example that was reproducing the issue for me. This is not an exact reproduction of the environment I'm working in on my other project (it's company code so I can't share much of it). In my real project, the image is passed into the class and just set to the source property in the constructor. But it is happening in this sample for me as well. I don't know if it has something to do with the timing of loading the photo...?

Here's the link to the repo, please let me know if there's any other information you need and I will see what I can provide.

https://github.com/jhariel8/ImageCropperTest

@HHChaos

[michael-hawker]

Thanks for the minimal project test @jhariel8! Hopefully that can help us track it down. I was only able to reproduce it a single time by chance, so definitely seems to point to some sort of timing issue.

@HHChaos let us know if you have a chance to take a look or need some assistance. Thanks!

[HHChaos]

@michael-hawker @jhariel8 Some updates, I tested this example and it seems that the reason is related to the control layout, when I set this to the value instead of the code below, the bug does not appear. I will provide a PR to fix it.
Height="{Binding Path=CROPPER_MAX_HEIGHT, ElementName=mainGrid}"

[HHChaos]

@jhariel8 I have submitted a PR(#4482 ) to fix this, you can see if it works in this branch.