1

W10 Mobile 提供扩展启动画面。我使用 Template10 和他们的指南来制作扩展的闪屏。我有 3 张尺寸的图片：620x300, 1240x600, 2480x1200px. 扩展的启动画面工作正常，但我想从中心到底部为图像设置动画。这是设置图像的代码：

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

高度为 731 有效像素，宽度为 411 有效像素。但图像居中，我想获得居中图像的大小。我不确定 Windows 会做什么以及它是否会缩放图像。

4

1 回答 1

1

加载扩展启动画面后，我开始从中心到底部为图像设置动画

您可以使用故事动画来做到这一点。比如我这里用DoubleAnimationUingKeyFrames，你可以选择你想要的适配动画。

Xaml 代码

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

代码后面，添加storyboard.Begin();到您的代码中。

  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();

此动画将让您的图像在九秒内从中心到底部。

动画完成后，导航到登录屏幕。

为此，您可以使用Completed 事件导航到登录屏幕。像

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

我上传了一个完整的演示，你可以参考。

于 2016-05-05T02:39:17.313 回答