Bild von Mitte nach unten auf Splashscreen animieren

Question

W10 Mobile bietet einen erweiterten Splashscreen. Ich verwende Template10 und ihre Richtlinie, um einen erweiterten Begrüßungsbildschirm zu erstellen. Ich habe 3 Bilder von Größen: 620x300, 1240x600, 2480x1200px. Extended Splashscreen funktioniert gut, aber ich möchte das Bild von Mitte nach unten animieren. Hier ist der Code für die Einrichtung des Bildes:

SplashScreenImage.SetValue(Canvas.LeftProperty, SplashScreen.ImageLocation.X); 
     SplashScreenImage.SetValue(Canvas.TopProperty, SplashScreen.ImageLocation.Y); 

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

Höhe ist 731 effektive Pixel und Breite 411 effektive Pixel. Aber das Bild ist in der Mitte, und ich möchte die Größe des zentrierten Bildes erhalten. Ich bin mir nicht sicher, was Windows macht und ob es das Bild skaliert.

Answer 1

Wenn die erweiterte Begrüßungsbildschirm geladen wird beginne ich das Bild von der Mitte nach unten

Sie können story animation zu animieren, dies zu tun. Zum Beispiel, hier verwende ich DoubleAnimationUingKeyFrames, können Sie die gewünschte Animation anpassen.

XAML-Code

<StackPanel> 
    <StackPanel.Resources> 
     <Storyboard x:Name="storyboard"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplashScreenImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
       <LinearDoubleKeyFrame KeyTime="0:0:0" Value="50" /> 
       <LinearDoubleKeyFrame KeyTime="0:0:2" Value="120" /> 
       <LinearDoubleKeyFrame KeyTime="0:0:9" Value="400" /> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </StackPanel.Resources> 
    <Canvas> 
     <Image x:Name="SplashScreenImage" 
       Loaded="SplashImage_Loaded" 
       Source="Assets/foo600320.jpg"> 
      <Image.RenderTransform> 
       <TranslateTransform /> 
      </Image.RenderTransform> 
     </Image>    
    </Canvas> 
</StackPanel>  

Code hinter, fügen storyboard.Begin(); an Ihrem Code.

SplashScreenImage.SetValue(Canvas.TopProperty, SplashScreen.ImageLocation.Y); 
    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons")) 
    { 
     SplashScreenImage.Height = SplashScreen.ImageLocation.Height/ScaleFactor; 
     SplashScreenImage.Width = SplashScreen.ImageLocation.Width/ScaleFactor; 
    } 
    else 
    { 
     SplashScreenImage.Height = SplashScreen.ImageLocation.Height; 
     SplashScreenImage.Width = SplashScreen.ImageLocation.Width; 
    } 
    storyboard.Begin(); 

Diese Animation lässt Ihr Bild in neun Sekunden von Mitte zu Ende gehen.

Nachdem die Animation abgeschlossen ist, navigieren Sie zum Anmeldebildschirm.

Hierfür können Sie die Completed event verwenden, um die Login-screen.Like

storyboard.Completed += MyStoryboard_Completed; 
private void MyStoryboard_Completed(object sender, object e) 
{ 
    // Navigate to mainpage 
    rootFrame.Navigate(typeof(MainPage)); 
    // Place the frame in the current Window 
    Window.Current.Content = rootFrame; 
} 

Ich habe eine komplette demo hochgeladen Sie verweisen können zu navigieren.