CODEWITHSUNDEEP
c#windows-runtimewin-universal-appuwp-xaml
JuP
JuP

Reputation: 535

Animate image from center to bottom on splashscreen

W10 Mobile offers to make extended splashscreen. I use Template10 and their guideline to make extended splashscreen. I have 3 images of sizes: 620x300, 1240x600, 2480x1200px. Extended splashscreen is working fine, but I'would like to animate the image from center to bottom. Here is the code of setting up the image:

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;
        }

Height is 731 effective pixels and Width is 411 effective pixels. But the image is center, and I would like to get the sizes of centered image. I'm not sure, what Windows does and if it scales the image.

Upvotes: 1

Views: 211

Answers (1)

Sunteen Wu
Sunteen Wu

Reputation: 10627

When extended splashscreen is loaded I start to animate the image from center to bottom

You can use story animation to do this. For example, here I use DoubleAnimationUingKeyFrames, you can choose the adapt animation you want.

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 Behind, add storyboard.Begin(); to your 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();

This animation will let your image from center to bottom in nine seconds.

after animation is completed, navigate to login screen.

For this you can use the Completed event to navigate to the 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;
}

I have a complete demo uploaded you can reference.

Upvotes: 1

Related Questions