Extended Splash Screen - ProgressRing disappers on mobile - xaml

Question

I have made an ExtendedSplashScreen by following the Microsoft docs. I have a logo and a ProressRing in the splash screen. It works well on desktop (Logo is in the center and ProgressRing is below it). But on my mobile, the ProgressRing disappears ( probably goes out of view ) but the logo is in the center.
Here's my XAML:
<Grid Background="#FFFFFF">
<Canvas>
<Image x:Name="extendedSplashImage" Source="/Assets/GeneraredSplash/SplashScreen.scale-100.png"/>
<ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"/>
</Canvas>
</Grid>
Code:
namespace Project.Views
{
partial class ExtendedSplash : Page
{
internal Rect splashImageRect; // Rect to store splash screen image coordinates.
private SplashScreen splash; // Variable to hold the splash screen object.
internal bool dismissed = false; // Variable to track splash screen dismissal status.
internal Frame rootFrame;
public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
InitializeComponent();
Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);
splash = splashscreen;
if (splash != null)
{
// Register an event handler to be executed when the splash screen has been dismissed.
splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);
// Retrieve the window coordinates of the splash screen image.
splashImageRect = splash.ImageLocation;
PositionImage();
// Optional: Add a progress ring to your splash screen to show users that content is loading
PositionRing();
}
// Create a Frame to act as the navigation context
rootFrame = new Frame();
}
// Position the extended splash screen image in the same location as the system splash screen image.
void PositionImage()
{
double ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.Left);
extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Top);
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()
{
double ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
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;
}
}
//Other methods like DismissExtendedSplash(), DismissedEventHandler(), ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e).....
}
}
I am not very familiar with image scaling, RawPixels, ScaleFactor etc. .
I found the code here
Also if you guys know some good tutorial for splash screen or something similar (other than Microsoft docs) that can help then please post the link to it.

Answer 1

You should put the ProgressRing control inside the Grid. It should always be in the center of the page, not the center of any child.
Also HorizontalAlignment="Center" won't do anything within a Canvas. You need to use Canvas.Left and Canvas.Top.