CircleImage becomes an Ellipse in UWP app

[CodePhobie]

Version Number of Plugin: 1.8.0.5 Device Tested On: UWP on Windows 10

Expected Behavior

CircleImage should be aligned in UWP centered with same width and height like on an Android Device

Actual Behavior

Image is steched over full width and becomes an ellipse; when setting the HorizontalOptions to Center the Image dissapears completely

Steps to reproduce the Behavior

1. Add the CircleImage to a grid-row that has a bigger width than height and assign a square-image with same Width and Height
2. Run the app on Android and on Windows (UWP)
3. While on Android the CircleImage looks perfect (centered circle); on UWP the CircleImage becomes an ellipse

Workaround

A workaround, to make it a circle on UWP, is to bind the WidthRequest to the Height explicit in XAML:

<imageCircle:CircleImage x:Name="_circleImage" 
                          Source="{Binding ProfilePicture}"
                          Aspect="AspectFill"
                          HorizontalOptions="Center"
                          WidthRequest="{Binding Height, Source={x:Reference _circleImage}}"
                          HeightRequest="100"
                          Grid.Row="2"
                          Grid.Column="1"
                          Grid.ColumnSpan="3" />

[jefersonkallynsr]

@CodePhobie, this did not work for me, unfortunately. However, my workaround for this was to place the image inside a grid cell in which the height and width characteristics are the same as the image.

[CodePhobie]

@jefersonkallynsr, did you also tried to set the HightRequest property? You can set it to any value because it will be overwritten by the Grid anyways. I was running into this issue because we try to avoid absolute sizes (Width and Height) to keep the UI as flexible (responsive) as possible.

[jefersonkallynsr]

@CodePhobie, I tried, but it did not work. At first I thought there was something wrong with the "CenterAndExpand" property of my grid, however I removed it and continued to stay in the form of ellipse. So I decided to test in different scenarios and realized that this problem happens to me when I'm using MasterDetailPage.

[jamesmontemagno]

The question is, should I use the Min or Max of the width/height to display it? probably the max I guess.

[jamesmontemagno]

Try out: 1.8.1.8-beta

UWP and other windows phone stuff is now aligned with other platforms

[CodePhobie]

@jamesmontemagno, tried the 1.8.1.8 beta but no change, still need to set the HeightRequest and WidtRequest in XAML. If I don't set these properties, the ImageCircle doesn't appear on the UWP UI at all:

    <imageCircle:CircleImage x:Name="_circleImage"
                             Source="{Binding Model.PictureId, Converter={StaticResource PictureIdToImageSourceConverter}}"
                             Aspect="AspectFill"
                             HorizontalOptions="Center"
                             WidthRequest="{Binding Height, Source={x:Reference _circleImage}}"
                             HeightRequest="100"
                             Grid.Row="2"
                             Grid.Column="1"
                             Grid.ColumnSpan="3" />

[jefersonkallynsr]

This totally worked for me, thank you @jamesmontemagno!

[jamesmontemagno]

@CodePhobie I am pretty sure that maybe this doesn't work: WidthRequest="{Binding Height, Source={x:Reference _circleImage}}"

Why don't you just set it to 100?