Multi-density images not behaving as expected

How-to Discussions
1

I am trying to use multi-density images, but while they appear correct on low density displays, they are different sizes on high-density displays.

Take the small example below (more or less the same as docs example) showing one image with only one density and one multi-density image. On low-res displays they appear the same, but on high-res displays the high-res image is double size. I expected these images to be the same size also on high-res displays. Is there something I am missing?

<App>
  <ScrollView>
  <StackPanel>
    <Image StretchMode="PointPrecise">
      <MultiDensityImageSource>
        <HttpImageSource Density="1" Url="http://lorempixel.com/100/100/" />
      </MultiDensityImageSource>
    </Image>
    <Image StretchMode="PointPrecise">
      <MultiDensityImageSource>
        <HttpImageSource Density="1" Url="http://lorempixel.com/100/100/" />
        <HttpImageSource Density="2" Url="http://lorempixel.com/200/200/" />
        <HttpImageSource Density="3" Url="http://lorempixel.com/300/300/" />
      </MultiDensityImageSource>
    </Image>
  </StackPanel>
</ScrollView>
</App>

LowRes display screenshot

HiRes display screenshot

Low-res is from Fuse Preview, hi-res iPhone 7 simulator, but I have also tested on a low-res Droid and iPhone 5.

PS! I have added StretchMode="PointPrecise" to the image definition. Event though the documentation says this is default, images fill the container width if not added.

PSS! If I use a DockPanel instead of a StackPanel and remove StretchMode="PointPrecise" the images appear the same size, but then the density 1 image is the same size as density 2, which seems a bit counter intuitive…

2

I ended up bypassing the problem by setting the width of the images manually on each tag. Not ideal, but it is a quite small project and it seems to be working.