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.
App.xaml 12345678<
Application
x:Class
=
"SimpleSplashExample.App"
StartupUri
=
"MainWindow.xaml"
>
<
Application.Resources
>
</
Application.Resources
>
</
Application
>
- Remove the StartupUri tag seen below in line 4.
App.xaml 12345678<
Application
x:Class
=
"SimpleSplashExample.App"
>
<
Application.Resources
>
</
Application.Resources
>
</
Application
>
- Open the App.xaml.cs.
App.xaml 1234567891011using
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.App.xaml.cs 1234567891011121314151617181920212223242526272829303132333435363738394041using
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.