Windows UWP Extended splash screen image rendering incorrectly on mobile

Question

I built an extended splash screen for my windows uwp application. I followed the example code including the xaml for extended spash screen from this page

Display a splash screen for more time

It renders correctly on the desktop window, it is centered perfectly and aligned exactly with the initial splash screen image, however when I try a mobile emulator, (I tried one of 5 inch screen at 720p) the extended splash screen page image seems too large (it looks almost twice or three times larger), and appears cut off to the bottom right of the page, I'm assuming the progress ring is below the image and is beyond the page boundary so it is not visible.

Here is what it looks like on mobile, left image is the initial splash screen, and the one on the right is the extended splash page.

My XAMLfor the extended splash page is like this

<Page
    x:Class="MyApp_Win10.ExtendedSplash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp_Win10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#FF000012" >
        <Canvas>
        <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen/SplashScreenImage3.png"/>
        <ProgressRing Name="splashProgressRing"   IsActive="True" Width="60" Height="60"  HorizontalAlignment="Center"></ProgressRing>
        </Canvas>
    </Grid>
</Page>

And my package.appmanifest looks like this. (There is one image in the Assets forlder that was created as SplashScreenImage3.scale-200.png with dimensions 1240 w x 600 h)

EDIT: I added the remaining 3 image scales 150, 125, and 100 to the package.appmanifest but it made no difference. Since the extended splash page is not the same as the initial splash page, I think it is choosing the exact image file I write in the XAML - which is the full sized on of dimension 1240 w x 600 h.

Also in the codebehind for the extended splash, these are the coordinates of the splash screen

EDIT: My PositionImage() and PositionRing() functions

void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);

    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;

}

void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width * 0.5) - (splashProgressRing.Width * 0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height * 0.1));

}

Answer 1

Make sure in your PositionImage() and PositionRing() functions that you handle the case when the device is a phone as follows

void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        extendedSplashImage.Height = splashImageRect.Height / ScaleFactor;
        extendedSplashImage.Width = splashImageRect.Width / ScaleFactor;
    }
    else
    {
        extendedSplashImage.Height = splashImageRect.Height;
        extendedSplashImage.Width = splashImageRect.Width;
    }
}

void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width * 0.5) - (splashProgressRing.Width * 0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height * 0.1));

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        splashProgressRing.Height = splashProgressRing.Height / ScaleFactor;
        splashProgressRing.Width = splashProgressRing.Width / ScaleFactor;
    }
}

and

//Variable to hold the device scale factor (use to determine phone screen resolution)
private double ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;