How can we center the splash screen properly on the screen without hard coding the size of the window ?

1 Answer 782 Views
SplashScreen
Julien
Top achievements
Rank 1
Julien asked on 21 May 2021, 01:58 PM

Hi,

When I am using the following code to show a splash screen using the RadSplashScreenManager, with StartupLocation = null, only the top left corner of the window is centered on the screen. I have the same behavior without customizing the SplashScreenDataContext :

            var splashScreenDataContext = (SplashScreenDataContext)RadSplashScreenManager.SplashScreenDataContext;
            splashScreenDataContext.ImageHeight = 300.0;
            splashScreenDataContext.ImageStretch = Stretch.Uniform;
            splashScreenDataContext.ImagePath = "/MyAssembly;component/Resources/MyImage.png";

            RadSplashScreenManager.Show();

In the sample, your are using hard coded sizes (260 and 160) to calculate the StartupLocation of the splash screen :

        private void ShowSplashScreen()
        {
            this.timer.Start();
            Mouse.OverrideCursor = Cursors.Wait;
            this.splashScreenDataContext = RadSplashScreenManager.SplashScreenDataContext as SplashScreenDataContext;
            this.splashScreenDataContext.ImagePath = "/SplashScreen;component/SplashScreen.png";
            this.splashScreenDataContext.IsIndeterminate = false;
            this.splashScreenDataContext.Content = "Loading... 0%";
            this.parentWindow.CanMove = false;
            this.parentWindow.IsEnabled = false;
            if (this.parentWindow.WindowState != System.Windows.WindowState.Maximized)
            {
                var x = this.parentWindow.Left + this.parentWindow.ActualWidth / 2 - 260;
                var y = this.parentWindow.Top + this.parentWindow.ActualHeight / 2 - 160;
                RadSplashScreenManager.StartupPosition = new System.Windows.Point(x, y);
            }

            RadSplashScreenManager.Show();
        }

Hard coding the sizes of the window is obviously not ideal. Instead, the splash window should act like any Window with the property SizeToContent="WidthAndHeight".

Can you help ?

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 26 May 2021, 08:36 AM

Hello Julien,

Thank you for the shared code snippets. 

My current understanding is that you want to show the RadSplashScreen centered on the screen. Feel free to correct me, if I am wrong and elaborate on the desired requirement. 

If that is indeed the case, there is no need to specify the StartupPosition as by default the startup position of the window that shows the splashscreen is center screen. I am attaching a small sample project with a RadSplashScreen positioned without any additional setup. Can you check it out and let me know, if it helps?

Regards,
Vladimir Stoyanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Julien
Top achievements
Rank 1
commented on 26 May 2021, 09:27 AM

Thank you Vladimir,
I tried your sample project and it works as expected, the SplashScreen is indeed in the center of the screen.

When I wrote my question, I was not able to display the SplashScreen centered using the default StartupPosition and some SplashScreenDataContext customization (Image, Content text, etc.).
The Window's top left corner was centered and was always in the lower right quadrant.
I was also in dotnet core 3.1 instead of net 4.8 and using the latest nuget packages in noxaml.

So I first tried converting your sample to a sdk project like mine in netcoreapp3.1 referencing the nuget packages and it was still working as expected. I then added my custom properties and it was still centered !

I ended up testing the same code in my project and now the SplashScreen is properly centered. Good !
But I don't know why it was not back then, so I'll go back to that revision and try to reproduce.
Maybe something was messing with the centering of the SplashScreen?
Vladimir Stoyanov
Telerik team
commented on 28 May 2021, 10:30 AM

Hello Julien,

I am glad to hear that the splash screen is displayed as intended.

Note, that we have encountered a similar scenario in our demos application. The reason for it was that the splash screen was displayed too early before the styles it needs were loaded from the Application's MergedDictionaries. Here is how we solved this:

internal static class QSFSplashScreenManager
    {
        internal static void Show()
        {
            (RadSplashScreenManager.HideAnimation as FadeAnimation).Duration = TimeSpan.FromMilliseconds(1000);
            RadSplashScreenManager.Show<QSFSplashScreen>();
        }

        internal static void Close()
        {
            RadSplashScreenManager.Close();
            RadSplashScreenManager.Reset();
        }

        private class QSFSplashScreen : RadSplashScreen
        {
            public QSFSplashScreen()
            {
                var controlsDictionary = new ResourceDictionary() { Source = new Uri("/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute) };
                var navigationDictionary = new ResourceDictionary() { Source = new Uri("/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.Navigation.xaml", UriKind.RelativeOrAbsolute) };

                // Needed for the RadSplashScreen to be positioned correctly in the center of the screen
                this.Resources.MergedDictionaries.Add(controlsDictionary);
                this.Resources.MergedDictionaries.Add(navigationDictionary);

                this.ImagePath = "pack://application:,,,/SplashScreen3.png";
                var basedStyle = navigationDictionary["RadSplashScreenStyle"] as Style;
                this.Style = new Style(typeof(QSFSplashScreen), basedStyle);
            }
        }
    }

The important part is the merging of the ResourceDictionaries inside the custom RadSplashScreen in order to ensure that it has access to the needed styles.

Julien
Top achievements
Rank 1
commented on 31 May 2021, 08:18 AM

This is indeed what was happening, the resources were set in the Application after displaying the splashscreen.
Thank you.
Vladimir Stoyanov
Telerik team
commented on 01 Jun 2021, 09:23 AM

You are welcome. I am glad to hear that I was able to help out. 
Tags
SplashScreen
Asked by
Julien
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Share this question
or