See your first eye in the crowd-start screen design

Background

The first screen that the user sees when they open the app is the start screen, although the start screen does not affect the final function of the application, but for the user, the first impression is very important; In addition, the user will see the splash screen every time the app runs, so the status of the splash screen is also very important.

Application in front of the display of the main realm, need to initialize some data, more complex applications, its initialization time is also a bit more, may need to initialize some of the basic components, log on to the remote server, remote synchronization of data and so on, which will cause the start screen for a long time, and the default startup screen is a static screen, Users will feel bad about the experience. If we can make the splash screen a little more vivid, we can make the user experience better.

We will discuss the implementation of the two startup screens below.

Programme I

You can add a page to display the new splash screen, and on this page we can add a progress bar and an animated effect, and then add the initialization action in front of the main realm to this page. The specific implementation steps are as follows:

1. Add Splashpage

Specific page display content, we can according to their own needs to design, at the same time can add some animation, so that waiting is no longer boring, no longer elaborate.

2, modify the App.xaml.cs

Jump to our new launch page at startup and pass in the launch event parameters, which may be used in subsequent navigation.

 protected  override  void   OnLaunched (Launchactivatedeventargs e) {Frame rootframe = Window.Current.Content as   Frame;  if  (rootframe = = null   //  Launchactivat Edeventargs passed in so that Splashpage can complete the correct jump according to the startup parameters  Splashpage splashpage = new                  Splashpage (e);            Window.Current.Content  = Splashpage;        } Window.Current.Activate (); }

3, splashpage in the treatment

Respond to the page's loaded event, perform the necessary initialization tasks in event handling, and jump to the correct subsequent page after the task is completed.

        Private Async voidPage_loaded (Objectsender, RoutedEventArgs e) {            //Necessary Initialization Tasks            awaitTask.delay ( the); //subsequent jumpsFrame Rootframe =NewFrame (); //here, we need to do the corresponding jump according to the Launchactivatedeventargs in splashpage construction.Rootframe.navigate (typeof(MainPage)); Window.Current.Content=Rootframe; }

4. Modify the system default startup screen

Open the app manifest, in the splash screen in the visible asset, modify the background color and splashpage to ensure smooth transitions, and modify the image resources used for the splash screen to be fully transparent.

5, the interface fine-tuning

Now run the program, you can see the effect has come out, but Splashpage title bar and the default start screen of the title bar is inconsistent, if you mind inconsistencies here, you can use the following code to modify the title bar.

            //for Mobile            if(Windows.Foundation.Metadata.ApiInformation.IsTypePresent ("Windows.UI.ViewManagement.StatusBar"))            {                //need to reference Windows Mobile Extensions for the UWPStatusBar SB =Statusbar.getforcurrentview (); //background color set to require colorSb. BackgroundColor = Color.FromArgb (255, -,149,237); Sb. Backgroundopacity=1; }            //for desktopApplicationview Appview =Applicationview.getforcurrentview (); Applicationviewtitlebar titlebar=Appview.titlebar; //background color set to require colorColor BC = COLOR.FROMARGB (255, -,149,237); Titlebar.backgroundcolor=BC; Titlebar.inactivebackgroundcolor=BC; //button background color to set on demandTitlebar.buttonbackgroundcolor =BC; Titlebar.buttonhoverbackgroundcolor=BC; Titlebar.buttonpressedbackgroundcolor=BC; Titlebar.buttoninactivebackgroundcolor= BC;

After the transformation, we can see the actual effect of the start screen. Note that because the system's solid splash screen is displayed before Splashpage appears, we should try to put all initialization-related actions in Splashpage instead of App.xaml.cs in order to reduce the display time of solid color pages.

Programme II

The above scenario, at first there will be a brief solid color page, we want to be able to retain the system's splash screen, display the app's logo, and then smooth transition to the custom page. Let's talk about some of our explorations and implementations.

The initial implementation

The basic idea is to add a new page, design the page with the background color and picture resources assigned to the splash screen in the app manifest, and then adjust the position of the picture on the current page based on the position of the picture on the system startup screen when the page loads, and if the page size changes, the current page needs to be re-adjusted.

In the extended display of the initial screen time, there are detailed implementation steps, you can quickly complete the implementation of this startup screen, here no longer repeat. The following is mainly about the implementation of this, we have encountered a series of problems.

Question 1

Run, the effect is good, will not appear the first solution of the solid color interface. But when we run on the phone simulator, there is a serious problem, the size of the picture is completely not on, debug tracking found that on the phone, the size of the system picture given in the SplashScreen is the physical resolution of the phone, you need to calculate the current set of display scale to get the size should be displayed.

So, let's change the code for the location of the image to the following

        voidPositionimage () {//Desktop            if(Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals ("Windows.desktop", Stringcomparison.currentcultureignorecase))                {Extendedsplashimage.setvalue (Canvas.leftproperty, splashimagerect.x);                Extendedsplashimage.setvalue (Canvas.topproperty, SPLASHIMAGERECT.Y); Extendedsplashimage.height=Splashimagerect.height; Extendedsplashimage.width=Splashimagerect.width; }            //Mobile            Else if(Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals ("Windows.mobile", Stringcomparison.currentcultureignorecase)) {                //gets a value that represents the original (physical) number of pixels of each view (layout) pixel.                 DoubleDensity =Windows.Graphics.Display.DisplayInformation.GetForCurrentView ().                Rawpixelsperviewpixel; Extendedsplashimage.setvalue (Canvas.leftproperty, Splashimagerect.x/density); Extendedsplashimage.setvalue (Canvas.topproperty, Splashimagerect.y/density); Extendedsplashimage.height= Splashimagerect.height/density; Extendedsplashimage.width= Splashimagerect.width/density; }            //Xbox has never been tried, can't make it up            Else            {            }        }

Question 2

Run again, in the phone simulator, the size of the boot image is consistent, can be linked, but the location of the picture will still shake down a bit, the height of the visual jitter is exactly the height of the mobile phone status bar. Therefore, we can use the following code to fill the page with the phone screen.

            if(Windows.Foundation.Metadata.ApiInformation.IsTypePresent ("Windows.UI.ViewManagement.StatusBar"))            {                //need to reference Windows Mobile Extensions for the UWPStatusBar SB =Statusbar.getforcurrentview (); //adjust to transparent, or you can use the background color of the splash screen + opaqueSb. Backgroundopacity =0; //Full Phone screenWindows.UI.ViewManagement.ApplicationView.GetForCurrentView ().            Setdesiredboundsmode (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow); }

Note that after you jump to the main interface, you need to decide whether or not to change the corresponding value back to the actual situation.

Question 3

The phone simulator is tuned and running with the real phone, there is a greater chance that you will see a slight flicker when switching between the system startup screen and the new startup screen. The reason is that when the system startup screen disappears, the picture of the new splash screen is not loaded yet, so you need to cut to the new splash screen after the picture is rendered.

This can be done in App.xaml.cs not invoke the activation of the current window, and then in the Imageopened event processing, start the timer, 50ms before activating the current window.

The main code is as follows

        PrivateDispatcherTimer Showwindowtimer; Private voidOnshowwindowtimer (ObjectSenderObjecte) {showwindowtimer.stop (); //activate/show The window, now, the splash image has renderedWindow.Current.Activate (); }        Private voidExtendedsplashimage_imageopened (Objectsender, RoutedEventArgs e) {            //ImageOpened means the file has a been read, but the image hasn ' t been painted yet. //Start A short timer to give the image a chance to render, before showing the window//And starting the animation.Showwindowtimer =NewDispatcherTimer (); Showwindowtimer.interval= Timespan.frommilliseconds ( -); Showwindowtimer.tick+=Onshowwindowtimer;        Showwindowtimer.start (); }

Question 4

The splash screen is now indented in the upper left corner of the phone.

This is a user feedback problem, at present, a total of two feedback, not easy to reproduce, we also only once, have not found the reason.

For the user's display, guess it is possible to reproduce the problem, the size of the image taken is not the resolution of the phone device, such as may be large, so we targeted the addition of some processing code, not sure whether the problem can be resolved, to the next version of the letter on the line, and then see if there are users feedback the problem. There's no code here.

Program Summary

The advantage of the scheme one is that the interface design of the new Start screen is more free, can play at will, at the same time, it can be well adapted to different devices; The disadvantage is that there will be a small period of time at the beginning of the solid-color screen, on the low-matching mobile phone is more obvious.

The advantage of the program two is that the system Start screen and the new Start screen to achieve a smooth transition, the disadvantage is that the interface design to take into account the system startup screen display, design constraints, at the same time, on different types of devices, the system incoming Start screen location is different, need to be targeted to adjust.

See your first eye in the crowd-start screen design