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; 

Answer 2

Why haven't you set another scale dimensions?
Just add them and try again.
Looks that your phone isn't has Scale 200

Answer 3

I have the same problem. In fact the height and width of the splashscreen returned are wrong on the mobile. It return the size of the screen instead!!!! see picture above ( height=1280 width=720, when the actual splashscreen have a width bigger than the height. I tried to recalculate the splashscreen size by using the width of the screen and guessing the size of the splashscreen used and dividing it by the scle factor, but there is a small difference of size due to a marging or something.... It would be great if someone know a better way to calculate the correct size instead of kind of guessing....

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
{
    ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
    double screenwidth = _splashImageRect.Width;
    if (screenwidth <= 1240) 
    {
        // small screen will use the splashscreen scale 100 - 620x300
        ExtendedSplashImage.Height = 300 / ScaleFactor;
        ExtendedSplashImage.Width = 620 / ScaleFactor;
    }
    else if (screenwidth > 1240 && screenwidth <= 2480)
    {
        // medium screen will use the splashscreen scale 200 - 1240x600
        ExtendedSplashImage.Height = (600 / ScaleFactor);
        ExtendedSplashImage.Width = (1240 / ScaleFactor);
    }
    else if (screenwidth > 2480)
    {
        // big screen will use the splashscreen scale 400 - 2480x1200
        ExtendedSplashImage.Height = 1200 / ScaleFactor;
        ExtendedSplashImage.Width = 2480 / ScaleFactor;
    }
}
else
{
    ExtendedSplashImage.Height = splashImageRect.Height;
    ExtendedSplashImage.Width = splashImageRect.Width;
}

Answer 4

I have found the solution for the mobile and if you try to share your app with another app:

private void PositionImage()
{    
    if(Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))            
    {
        double screenWidth = _splashImageRect.Width;
        ExtendedSplashImage.Width = screenWidth/ ScaleFactor;
        // use the ratio of your splashscreen to calculate the height
        ExtendedSplashImage.Height = ((screenWidth / ScaleFactor) * 600) / 1240;
    }
    else
    {
        // if the app is shared with another app the _splashImageRect is not returns properly too
        if (_splashImageRect.Width > windowContext.VisibleBounds.Width || _splashImageRect.Width < 1)
        {
            ExtendedSplashImage.Width = windowContext.VisibleBounds.Width;
            // use the ratio of your splashscreen to calculate the height
            ExtendedSplashImage.Height = ((windowContext.VisibleBounds.Width) * 600) / 1240;
        }
        else
        {
            ExtendedSplashImage.Height = _splashImageRect.Height;
            ExtendedSplashImage.Width = _splashImageRect.Width;
        }
    }

    Double left = windowContext.VisibleBounds.Width / 2 - ExtendedSplashImage.ActualWidth / 2;
    Double top = windowContext.VisibleBounds.Height / 2 - ExtendedSplashImage.ActualHeight / 2;
    ExtendedSplashImage.SetValue(Canvas.LeftProperty, left);
    ExtendedSplashImage.SetValue(Canvas.TopProperty, top);

    ProgressRing.SetValue(Canvas.LeftProperty, left + ExtendedSplashImage.ActualWidth / 2 - ProgressRing.Width / 2);
    ProgressRing.SetValue(Canvas.TopProperty, top + ExtendedSplashImage.ActualHeight);

}