How to display a splash screen for at specific minimum length of time in WPF
WPF supports the ability to make an image load immediately as a splash screen to give your application the appearance of loading faster. It doesn’t actually load faster, but seeing the splash screen is a “feel good” experience for the user.
Adding a basic splash screen
Adding a Splash Screen to a WPF application is very easy, now.
- Right-click any image in the start-up project and choose Properties.
- Set the Build Action to SplashScreen.
Yes it is that easy. You are done.
The problem with the basic splash screen
We found that on some machines the splash screen is a “must have” because the application load time was greater than two seconds. In fact, it was so long that without the splash screen, the user thought the program didn’t start and clicked it again. So a splash screen was added the default way.
However, on newer and faster machines, the application load time was less than half a second. For these newer and faster devices, the splash screen loads and closes so quickly it is awkward.
It would actually be better to always have the splash screen show for a minimum of two seconds whether the machine is fast or slow.
Adding a splash screen that displays for a minimum amount of time
Step 1 – Add an image to use as a splash screen to your project
- Add an image to your Visual Studio project.
Note 1: I put mine in an images folder and since I it is a “Hello World” example, I just grabbed the first picture from an internet search.
Note 2: Use a .png file. - In Visual Studio, right-click on the image and choose Properties.
- Make sure the image is set to Resource.
Important! Do not set it to Splash Screen.
Step 2 – Take control of the window startup
- Open the App.xaml file.
<Application x:Class="SimpleSplashExample.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application>
- Remove the StartupUri tag seen below in line 4.
<Application x:Class="SimpleSplashExample.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Application.Resources> </Application.Resources> </Application>
- Open the App.xaml.cs.
using System.Windows; namespace SimpleSplashExample { /// <summary> /// Interaction logic for App.xaml /// </summary> public partial class App : Application { } }
- Add a couple integers as member variables, one for the minimum time, 1.5 seconds, and one for the splash screen fade time, .5 seconds.
- Override the OnStartup method.
- Add a SplashScreen object using the image you added earlier and show it.
- Add a StopWatch object to monitor the time and start timing.
- Load the Window object that previously was being loaded by the StartupUri, but don’t show the window yet.
- Stop the StopWatch and then see how much time has elapsed.
- If the time is less than 1.5 seconds sleep the remaining time.
- Stop the SplashScreen.
- Now, show your window.
Note: I added comments showing how to do this in five basic steps.using System; using System.Diagnostics; using System.Threading; using System.Windows; namespace SimpleSplashExample { /// <summary> /// Interaction logic for App.xaml /// </summary> public partial class App : Application { private const int MINIMUM_SPLASH_TIME = 1500; // Miliseconds private const int SPLASH_FADE_TIME = 500; // Miliseconds protected override void OnStartup(StartupEventArgs e) { // Step 1 - Load the splash screen SplashScreen splash = new SplashScreen("Images/Globe-256.png"); splash.Show(false, true); // Step 2 - Start a stop watch Stopwatch timer = new Stopwatch(); timer.Start(); // Step 3 - Load your windows but don't show it yet base.OnStartup(e); MainWindow main = new MainWindow(); // Step 4 - Make sure that the splash screen lasts at least two seconds timer.Stop(); int remainingTimeToShowSplash = MINIMUM_SPLASH_TIME - (int)timer.ElapsedMilliseconds; if (remainingTimeToShowSplash > 0) Thread.Sleep(remainingTimeToShowSplash); // Step 5 - show the page splash.Close(TimeSpan.FromMilliseconds(SPLASH_FADE_TIME)); main.Show(); } } }
You now have a splash screen with a nice, consistent user experience whether you have fast or slow hardware.
Thanks, I didn’t remember what it was like, but here’s a new solution:
public partial class App : Application
{
private const int MINIMUM_SPLASH_TIME = 1500; // Miliseconds
private const int SPLASH_FADE_TIME = 2500; // Miliseconds
protected override async void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
SplashScreen splash = new SplashScreen(“img/1.png”);
Stopwatch timer = new Stopwatch();
timer.Start();
Login_Window login = new Login_Window();
MainWindow main = new MainWindow();
this.MainWindow = main;
Nullable dialogResult = login.ShowDialog();
if (dialogResult == false)
{
MessageBox.Show(“The app will be closed!”);
this.Shutdown();
return;
}
splash.Show(false, true);
timer.Stop();
int remainingTimeToShowSplash = MINIMUM_SPLASH_TIME – (int)timer.ElapsedMilliseconds;
if (remainingTimeToShowSplash > 0)
Thread.Sleep(remainingTimeToShowSplash);
await Task.Run(() =>
{
splash.Close(TimeSpan.FromMilliseconds(SPLASH_FADE_TIME));
Thread.Sleep(SPLASH_FADE_TIME);
});
main.Show();
}
}
Hello, I asked a question about a month ago. How to delay the appearance of the main window. And in the text my issue was important for me information. There I had a decision of how to make a delay. Now I needed to make a delay again, but I forgot how. And I didn’t keep the text of that question. Could you send me an e-mail alexfarm2@yandex.ru the text of my question. Sincerely, Alexis
Pretty simple and easy to implement.
Thanks for sharing
Great ! exactly as I want
Thanks, dude. This was very helpful
I wanted to thank you as well.
Cheers
I am glad this helped you.
Wonderful, thank you for this!
Anytime…I’m just glad it helped you.
I needed to do it, so I documented it. Glad it helped you too.