FileImageSource and density: defining density and why doesnt it behave?

General
1

So, I am testing this image:

<Page ux:Class="SplashScreen">
    <Image>
    	<MultiDensityImageSource>
    		<FileImageSource File="../assets/AlfaProIcon_48x48_mdpi.png" Density="1"/>
    		<FileImageSource File="../assets/AlfaProIcon_72x72_hdpi.png" Density="2"/>
    		<FileImageSource File="../assets/AlfaProIcon_96x96_xhdpi.png" Density="3"/>
    		<FileImageSource File="../assets/AlfaProIcon_144x144_xxhdpi.png" Density="4"/>
    		<FileImageSource File="../assets/AlfaProIcon_192x192_xxxhdpi.png" Density="5"/>
    		<FileImageSource File="../assets/AlfaProIcon_512x512.png" Density="6"/> 
    	</MultiDensityImageSource>
    </Image>
</Page>

But Im not sure what to put in the Density property. In the examples and videos, you start at 1 with the lowest res image, and then go up, but im not sure where hte numbers come from? can someone explain?

If I run it on my Nexus 5X, it seems like it always takes the 96x96 and showing on the screen, so density 3.

Thanks =)

2

@ted: The density is the “scale factor” of the image. Each image is a grid of pixels, but we need to map these pixels to set of device-independent points to retain physical sizes across different devices. The density tells us what kind of pixel-to-point ratio the image is intended for. You can generally think of it like a multiplier on the size of the “base”-image.

According to https://design.google.com/devices/, Nexus 5X has a density of 2.6, meaning that density=3 is the closest fit. So I believe this works as expected, you get the closest fitting image. However, you might want to set StretchMode=“PixelPrecise” on the image to prevent artifacts from resampling.