uwp template 10 学习（一）

splash

• 首先vs项目自带一个screensplash，这个是所有uwp应用都会有的，时间很短；
  
  • 关于自带的screensplash，可以在Package.appxmanifest这个文件中进行修改（添加不同尺寸下显示的图片）
    

• 然后template 10自己还会生成一个screensplash，这个splash的页面可以在view.splash.xaml中进行设计

  • 关于这个自定义的screensplash，template 10为我们重写了函数APP.OnStartAsync，在这个函数中可以做一些你想要做的事情，比如加载数据库数据之类，然后在你完成加载的时候再跳转到mainpage页面：

     public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
     {
         // TODO: add your long-running task here
         await System.Threading.Tasks.Task.Delay(5000);
         await NavigationService.NavigateAsync(typeof(Views.MainPage));
     }

    这里我是做了一个等待操作，可以替换成等待一段时间，这样就可以看到template 10为我们提供的splash（如果什么都不做，那么将无法看到template 10 为我们设计点splash，只能看到自带的splash）

  • 还有值得一提的是这个splash.cs对图片自适应的处理：
    cs代码：

     public Splash(SplashScreen splashScreen)
     {
         InitializeComponent();
         Window.Current.SizeChanged += (s, e) => Resize(splashScreen);
         Resize(splashScreen);
         Opacity = 0;
     }
    
     private void Resize(SplashScreen splashScreen)
     {
         if (splashScreen.ImageLocation.Top == 0)
         {
             splashImage.Visibility = Visibility.Collapsed;
             return;
         }
         else
         {
             splashImage.Visibility = Visibility.Visible;
         }
         splashImage.Height = splashScreen.ImageLocation.Height;
         splashImage.Width = splashScreen.ImageLocation.Width;
         splashImage.SetValue(Canvas.TopProperty, splashScreen.ImageLocation.Top);
         splashImage.SetValue(Canvas.LeftProperty, splashScreen.ImageLocation.Left);
         ProgressTransform.TranslateY = splashImage.Height / 2;
     }
    

    xaml代码：

    <Grid Background="{StaticResource ExtendedSplashBackground}">
    
       <Viewbox x:Name="splashImage">
           <Image x:Name="rootCanvas" Source="ms-appx:///Assets/SplashScreen.png" ImageOpened="Image_Loaded" />
       </Viewbox>
    
       <ProgressRing x:Name="progressRing"
                   Width="50"
                   Height="50"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground="{StaticResource ExtendedSplashForeground}"
                   IsActive="True"
                   RenderTransformOrigin="0.5,0.5">
           <ProgressRing.RenderTransform>
               <CompositeTransform x:Name="ProgressTransform" TranslateY="120" />
           </ProgressRing.RenderTransform>
       </ProgressRing>
    
    </Grid>

    这里将splashimage的图片使用sizechange函数实时更改为原来的大小，使得图片一直维持一个大小。

• 也就是说，打开一个应用，首先会出现uwp自带的screensplash，然后出现template 10提供的splash（这个是可选的）