A splash screen is an effective way to improve an app’s user experience during lengthy startup operations. Unfortunately, creating an effective splash screen can be tricky because two competing objectives must be addressed simultaneously:
- A splash screen needs to be visually appealing. It’s your first chance to make a great impression.
- A splash screen should load instantaneously. Loading delays will defeat the overall purpose of the splash screen.
As you may already know, our WPF Subscription includes DXSplashScreen - A UI component that was built years ago to help you create and add splash screens to any WPF app.
Our latest release (v20.1) includes an entirely new Splash Screen control - a UI component we’ve named SplashScreenManager.
Let’s quickly look at the new DevExpress Splash Screen Manager, review why it was built, and why we replaced DXSplashScreen.
Design Elegance
Our Splash Screen Manager ships with two predefined styles – Themed, Fluent (Acrylic).
As its name implies, a Themed Splash Screen uses the same color scheme as that used by your application.
Our next predefined style - Fluent Splash Screen - features an Acrylic effect. As you can see below, this splash screen uses a translucent background. Once again, we’ve optimized the splash screen as much as possible – making certain that it loads quickly.
App-wide Wait Indicators
Wait Indicators are a great way to provide feedback during time-intensive operations. I can cite countless examples to illustrate this point. For instance, a wait indicator will improve an app’s user experience during long fetch operations.
You can use our new Splash Screen Manager to create wait indicators within your app as needed. Simply set the owner and trackOwnerPosition parameters of the Show method to place a splash screen atop a specific UI element and keep it there if the user resizes or drags the window around.
Splash screens created with the Splash Screen Manager are processed in a separate thread and do not interfere with the main application flow.
However, you may want to control user interaction with your application once you’ve displayed the “splash screen” in this specific usage scenario. This can be done with a single method parameter. Your options vary: you can block the application, restrict input within the window but allow the user to drag the window around, or block a specific element. It’s all up to you.
Performance
This post began with a simple proposition – a splash screen must be loaded quickly. Well, we designed SplashScreenManager so it’s fast. To maximize performance and ensure a timely display, we’ve made certain not to load all DevExpress Theme resources – We load what we need so we can render the splash screen quickly.
We have measured the startup time on different PC configurations with and without the Ngen.exe optimization:
Themed Splash Screen: 290-450 ms
Fluent Splash Screen: 300-460 ms
Compiled with Ngen.exe:
Themed Splash Screen: 170-370 ms
Fluent Splash Screen: 180-370 ms
In comparison, DXSplashScreen (with a default template) renders in 720-1000 ms. (450-900 ms after Ngen.exe compilation). The bottom line is this: our new SplashScreenManager loads about 50% faster.
Of course, performance metrics are app dependent. If you’d like to take a closer look at our comparison figures, simply download this project from Github: https://github.com/DevExpress-Examples/splashscreenmanager-startup-test
Ease of Use
We’ve tried to make use of the SplashScreenManager as painless as possible. Here is how you can integrate it into your next app:
Step One - Add the following code to App.xaml.cs:
SplashScreenManager.CreateThemed(new DXSplashScreenViewModel {
Status = "Starting...",
Title = "The Best or Nothing!" }
).ShowOnStartup(); Step Two – Just kidding, there’s no second step. The code above generates a splash screen using an application’s default color scheme, displays it with a priority over the main application to minimize delays, and hides it once the application is initialized.
Ease of Customization
You can edit the content of our predefined splash screens with a few lines of code by accessing the view model. You can swap the image used, edit displayed text, and modify progress bar value.
If you require more extensive customization, you can incorporate a predefined splash screen from our Template Gallery or implement your own design from scratch. Our documentation includes a tutorial to help simplify this process.
MVVM in Mind
We extended our set of services to help you add SplashScreenManager functionality to MVVM-compliant applications. Add a splash screen from our template gallery to your application, customize it as you see fit and then add the SplashScreenManagerService to your view of choice. Easy as 1-2-3.
Feedback
If you’d like to share your thoughts about SplashScreenManager, please post a comment below. We’ll be happy to follow up.