Extended splash screen in Windows 10 UWP?

Question

I have created an extended splash screen for Windows 10 UWP app using following XAML and C# Code.

XAML Code

<Grid Background="#036E55">
    <Canvas>
        <Image x:Name="extendedSplashImage" Source="Assets/620.scale-200.png"/>
    </Canvas>

    <ProgressRing Name="splashProgressRing" 
                  IsActive="True" 
                  Width="20" 
                  Height="20"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Bottom"
                  Foreground="White"
                  Margin="20">
    </ProgressRing>
</Grid>

C# Code

internal Rect splashImageRect;
    private SplashScreen splash;
    internal bool dismissed = true;
    internal Frame rootFrame;
    private double ScaleFactor;
    ApplicationDataContainer userSettings = ApplicationData.Current.LocalSettings;
    JsonDataHandler dataHandler;
    //bool isZipUpdateInProgress = false;

    public ExtendedSplashScreen(SplashScreen splashscreen, bool loadState)
    {
        this.InitializeComponent();
        Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);
        ScaleFactor = (double)DisplayInformation.GetForCurrentView().ResolutionScale/100;
        //System.Diagnostics.Debug.WriteLine("ScaleFactor - " + ScaleFactor + "/n");
        splash = splashscreen;
        if (splash != null)
        {
            splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

            splashImageRect = splash.ImageLocation;
            PositionImage();
            //PositionRing();
        }
        rootFrame = new Frame();
    }

    void PositionImage()
    {
        extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
        extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
        extendedSplashImage.Height = splashImageRect.Height / ScaleFactor;
        extendedSplashImage.Width = splashImageRect.Width / ScaleFactor;

    }


    void PositionRing()
    {
        splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width * 0.5) - (splashProgressRing.Width * 0.5));
        splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height * 0.1));
    }

void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
    {
        // Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window.
        if (splash != null)
        {
            // Update the coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();

            // If applicable, include a method for positioning a progress control.
            PositionRing();
        }
    }

Now, it works fine if I keep rotation mode on, but when I switch it off, and if I rotate the screen to landscape mode then the logo differs. I am using 620x300 image.

JigsK · Accepted Answer · 2017-01-09T13:51:35.350

3

You can try with this code it might help you to get result as you want, First remove all positioning image code and only try with this

<Grid Background="#036E55">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Source="Assets/620.scale-200.png" Stretch="None"/>
            <ProgressRing IsActive="True" Height="30" Width="30" Margin="0,10,0,0" Foreground="White"/>
       </StackPanel>
</Grid>

Image and ProgressRing will manage by StackPanel in center of screen and also Image will not differ. Hope it will help you.

edited Jan 09 '17 at 13:51

answered Jan 09 '17 at 13:38

JigsK

81
5

Will this work in both modes and in both Mobile and Desktop apps? – Kinjan Bhavsar Jan 09 '17 at 16:31
Yes it will support in universal app. You can changes size of Image and ProgressRing depend upon size you want for phone app and desktop/tablet app. But you do not have to change potion it will auto manage. – JigsK Jan 10 '17 at 05:03
This is not working as expected. The image display very big in size. – Kinjan Bhavsar Jan 10 '17 at 06:09
Image will display as same size the image was, for phone you can resize the image by putting condition in code `if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile") { // code for phone } else { // other code }` – JigsK Jan 10 '17 at 07:20
1

A small note: If you have Assets for each scale factor you can simply set the source like following: `Source="ms-appx:///Assets/620.png"`. This will automatically select the image with the scale factor your device requires. – DevAttendant Jan 10 '17 at 14:41
I tried the same code and the progress ring doesn't show up on my phone. – ravi kumar Jul 03 '17 at 12:15

Extended splash screen in Windows 10 UWP?

1 Answers1