Xamarin Forms Overstreched image

Question

I have a problem. I am using the following extension in my code: https://github.com/andreinitescu/IconApp

With that I can control the color of an image. I implemented that in my own code like this:

<StackLayout Orientation="Vertical">
    <StackLayout HeightRequest="70" BackgroundColor="#013252" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <Image Source="arrow_back" VerticalOptions="CenterAndExpand" HeightRequest="30" Margin="10,0,0,0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="btnBack_Clicked" />
            </Image.GestureRecognizers>
        </Image>

        <Label x:Name="txtDeviceName" TextColor="White" FontSize="30" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Margin="10,0,0,0" />
    </StackLayout>

    <Grid Padding="0" HorizontalOptions="FillAndExpand" Margin="40,30,40,0" x:Name="gridLedstrip" HeightRequest="0">
        <controls:IconView x:Name="imgLedstrip" Source="ledstrip" BackgroundColor="White" />
    </Grid>


    <Grid Padding="0" HorizontalOptions="FillAndExpand" Margin="40,30,40,0" x:Name="gridCanvas" HeightRequest="500" IsVisible="False">
        <views:SKCanvasView x:Name="skiaView"
                PaintSurface="OnCanvasViewPaintSurface" />
        <Grid.Effects>
            <tt:TouchEffect Capture="True"
                TouchAction="OnTouchEffectAction" />
        </Grid.Effects>
    </Grid>

    <Label Text="BRIGHTNESS" TextColor="White" FontSize="20" Margin="40,0,40,0" />
    <StackLayout Orientation="Horizontal" Margin="40,0,40,0">
        <Slider x:Name="sliderBrightness" Minimum="0" Maximum="100" VerticalOptions="CenterAndExpand"
                HorizontalOptions="FillAndExpand" ValueChanged="sliderBrightness_ValueChanged" DragCompleted="sliderBrightness_DragCompleted" />
        <Label x:Name="txtBrightness" TextColor="White" FontSize="18" />
    </StackLayout>

</StackLayout>

Now the problem is that ledstrip.png is a square when you look at image size, because it is 600x600, but when I show it on the screen with a black background I can see that this IconView is stretched to the maximum in height. How can I make the height equal to the width.

I already tried:

gridLedstrip.HeightRequest = gridLedstrip.WidthRequest;

But no matter what I fill in in the HeighRequest, it just keeps being stretched!

Any suggestions?

Brandon Minnick Brandon Minnick · Accepted Answer · 2020-03-24T22:24:49

To avoid distorting the image, use Aspect = "AspectFit"

 <Image Aspect="AspectFit" Source="arrow_back" VerticalOptions="CenterAndExpand" HeightRequest="30" Margin="10,0,0,0">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="btnBack_Clicked" />
    </Image.GestureRecognizers>
</Image>

Xamarin Forms Overstreched image

2 Answers