Forum Xamarin.Forms

Why isn't my embedded image resources respecting the AspectFit property?

grimordegrimorde Member ✭✭

I'm using embedded images for an app. They display fine but they seem to be quite small. When I originally created the same layout using a locally defined image resource, the image scaled correctly.

What am I missing? I've tried removing the use of PancakeView but that has made no difference.

<StackLayout VerticalOptions="StartAndExpand">
<pancakeView:PancakeView x:Name="DarkMapV" CornerRadius="30" HorizontalOptions="Center" VerticalOptions="StartAndExpand">
<Image Aspect="AspectFit" Source="{markupExtensions:ImageResource MyApp.Images.map1.png}" />
</pancakeView:PancakeView>
<pancakeView:PancakeView x:Name="LightMapV" CornerRadius="30" HorizontalOptions="Center" IsVisible="False" Opacity="0" VerticalOptions="StartAndExpand">
<Image Aspect="AspectFit" Source="{markupExtensions:ImageResource MyApp.Images.map.png}" />
</pancakeView:PancakeView>
</StackLayout>

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited January 24

    Test

    1. Local Image

        <StackLayout VerticalOptions="StartAndExpand">
             <Image Aspect="AspectFit" Source="dog2.png"/>
        </StackLayout>
      

    2. Embedded Image

        <Image Aspect="AspectFit" Source="{local:ImageResource dog2.png}" />
      


    Did you place the local image in Resources/drawable folder in android project ?

    Could you share us your image fie so that i can test on my side .

  • grimordegrimorde Member ✭✭
    edited January 24

    Hmmm... I took it right back to a basic screen so I could be sure nothing else I had in the layout was interfering

    1. Local
    <ContentPage.Content>
            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand">
                <Image Aspect="AspectFit" Source="crucible.png" />
            </StackLayout>
        </ContentPage.Content>
    

    1. Embedded
    <ContentPage.Content>
            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand">
                <Image Aspect="AspectFit" Source="{markupExtensions:ImageResource TesterApp.Images.crucible.png}" />
            </StackLayout>
        </ContentPage.Content>
    

    The image file I'm using is attached.

    The local image is in Resources/drawable for Android and just to rule out the last (I think) variable, my ImageResourceExtension code is:-

    public object ProvideValue(IServiceProvider serviceProvider)
            {
                if (Source == null)
                {
                    return null;
                }
    
                // Do your translation lookup here, using whatever method you require
                var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
    
                return imageSource;
            }
    
  • batmacibatmaci DEMember ✭✭✭✭✭

    Because when you place in drawable folders with different size, android api takes care off the correct size for you based on the device resolution. But embedded image is only 1 with 1 size, you must define a fix width and height. If you dont want to hardcode the size, you should do a dynamic calculation within OnSizeChanged event of the page by using screen resolution of the actual device.

  • grimordegrimorde Member ✭✭

    OK I've obviously missed something then. I thought the use of embedded images would allow me to scale as required with the available space per device, not by having to set the width/height.

    Thanks!

Sign In or Register to comment.