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.

  1. Right-click any image in the start-up project and choose Properties.
  2. 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

  1. 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.
  2. In Visual Studio, right-click on the image and choose Properties.
  3. Make sure the image is set to Resource.
    Important! Do not set it to Splash Screen.

Step 2 – Take control of the window startup

  1. 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>
    
  2. 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>
    
  3. Open the App.xaml.cs.
    using System.Windows;
    
    namespace SimpleSplashExample
    {
        /// <summary>
        /// Interaction logic for App.xaml
        /// </summary>
        public partial class App : Application
        {
        }
    }
    
  4. 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.
  5. Override the OnStartup method.
  6. Add a SplashScreen object using the image you added earlier and show it.
  7. Add a StopWatch object to monitor the time and start timing.
  8. Load the Window object that previously was being loaded by the StartupUri, but don’t show the window yet.
  9. Stop the StopWatch and then see how much time has elapsed.
  10. If the time is less than 1.5 seconds sleep the remaining time.
  11. Stop the SplashScreen.
  12. 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.

10 Comments

  1. Alexis says:

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

  2. Alexis says:

    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

  3. Adahada says:

    Pretty simple and easy to implement.
    Thanks for sharing

  4. Faruk Özkal says:

    Great ! exactly as I want

  5. Oofah says:

    Thanks, dude. This was very helpful

  6. Visitor says:

    I wanted to thank you as well.
    Cheers

  7. Kevin says:

    Wonderful, thank you for this!

Leave a Reply