How to know the size of a image loaded from HttpImageSource

How-to Discussions
1

I’m using HttpImageSource to load a image and fadeIf after load.

<Rectangle ux:Name="Image" Background="#ffffff" CornerRadius="5">
    <ImageFill StretchMode="UniformToFill" Source="BackImage" />
</Rectangle>

<Image Visibility="Collapsed">
    <HttpImageSource Url="{picture}" ux:Name="BackImage"/>
    <WhileLoading>
        <Change Image.Opacity="0" Duration="0" DurationBack="0.2" />
    </WhileLoading>
</Image>

But they different sizes, and I need to make the Rectandle the size of image.

I think a good example is pinterest image load.

alt tag

2

I your server returns the size of the images as part of the headers, you can create a custom ImageSource where you read out that information.

3

OK, I was thinking about this. but how to manage the difference bewteen pixels and points? And you have and example of an custom ImageSource? it’s in Uno?

4

If you need to know the size of the image before it is loaded this needs to come via a different mechanism. I’ve seen APIs do this before by returning that image size as part of the primary feed listing. That is, whatever generates your list of items to display has both a link to the image, and the size of that image.

In practice often a ratio is sufficient, not the actual size. An adapative display cares more about the ratio. The example you show is ratio based, it calculates the height based on the image size ratio and width of the column.

Using a ratio also means you don’t need to care about the difference between points and pixels. If you do need to know about density then you’ll have to get it from the Viewport with Uno code.

5

Yes, I think that is a better idea. Just do an http call first to get all the ratios in a list, and then load the actual images.