Écran de démarrage étendu - ProgressRing disparaît sur le mobile

Question

J'ai créé un ExtendedSplashScreen en suivant les documents Microsoft. J'ai un logo et un ProressRing dans l'écran de démarrage. Il fonctionne bien sur le bureau (Logo est au centre et ProgressRing est ci-dessous). Mais sur mon mobile, le ProgressRing disparaît (probablement hors de vue) mais le logo est au centre. Voici mon 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)..... 
    } 
} 

Je ne suis pas très familier avec mise à l'échelle de l'image, RawPixels, ScaleFactor etc. J'ai trouvé le code here

Aussi si vous connaissez un bon tutoriel pour l'écran de démarrage ou quelque chose de similaire (autre que Microsoft docs) qui peut aider alors s'il vous plaît poster le lien vers celui-ci.

Answer 1

Vous devez placer le contrôle ProgressRing dans la grille. Il devrait toujours être au centre de la page, pas le centre d'un enfant.

De même, HorizontalAlignment="Center" ne fera rien dans un Canevas. Vous devez utiliser Canvas.Left et Canvas.Top.