Skip to content

How to get perfect square with ImageCropper #4483

Closed
@michael-hawker

Description

@michael-hawker

Discussed in #4478

Originally posted by jhariel8 February 7, 2022
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!

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions