Navigation On Universal Windows platform

Question

I am developing a Windows Universal App which is hosting a web app using webview. steps are followed as like.

1. Creating a Blank universal window app. Creating a Splash screen. Set splash screen as starting page. After all activity i would like to navigate the Main page which is having a web view control.
2. Setting a url example "http:www.google.come" as source for the web view. everything it works a fine but the main page takes time, where i would like to see the same splash screen till it loads.
3. Code for Navigation i am using this.Frame.Navigate(typeof(MainPage));

full source code

public sealed partial class ExtentedSpash : Page
{
    public ProgressMessage Progress;
    public ExtentedSpash()
    {
        this.InitializeComponent();
        Progress = ProgressMessage.GetMessage();
        DataContext = Progress;
        Window.Current.Activate();
        Loaded += Splash_Loaded;
    }

    private async void Splash_Loaded(object sender, RoutedEventArgs e)
    {
        await Initialize();
        Window.Current.Activate();

        await ClearBrowserCache();
        Window.Current.Activate();

        //Task.WaitAll(TaskList.ToArray());
        await StartApplication();
    }


    public async Task Initialize()
    {
        Progress.ActionMessage = "Initialize the controls";
        await Task.Delay(TimeSpan.FromSeconds(10));
    }
    public async Task ClearBrowserCache()
    {
        Progress.ActionMessage = "Clear Browser Cache";
        await Task.Delay(TimeSpan.FromSeconds(10));
    }

    public async Task StartApplication()
    {
        Progress.ActionMessage = "Loading";
        await Task.Delay(TimeSpan.FromSeconds(10));
        this.Frame.Navigate(typeof(MainPage));
    }

    private void btnMain_Click(object sender, RoutedEventArgs e)
    {

    }
}
public class ProgressMessage : INotifyPropertyChanged
{
    private string statusMessage;

    public string StatusMessage
    {
        get { return statusMessage; }

        set
        {
            statusMessage = value;
            RaiseProperChanged();
        }
    }

    private string actionMessage;

    public string ActionMessage
    {
        get { return actionMessage; }

        set
        {
            actionMessage = value;  
            RaiseProperChanged();
        }
    }
    private bool showProgress;

    public bool ShowProgress
    {
        get { return showProgress; }
        set { showProgress = value;
            RaiseProperChanged();
        }
    }


    public static ProgressMessage GetMessage()
    {

        var msg = new ProgressMessage()
        {
            StatusMessage = "Initializing Application",
            ActionMessage = "One moment please...",
            showProgress = true
        };

        return msg;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaiseProperChanged(
       [CallerMemberName] string caller = "")
    {

        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(caller));
        }

    }


}

}

I want "On Loading" message should show til it fully loads the application.

Answer 1

As we've discussed, if you just want to cover the WebView when it's source is not complete loaded, you can do it like this:

<Page.Resources>
    <Storyboard x:Key="MyTextSTD" x:Name="MyTextSTD" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="tbbrush" Storyboard.TargetProperty="Color" Duration="0:0:10">
            <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red" />
            <LinearColorKeyFrame KeyTime="0:0:5" Value="Blue" />
            <LinearColorKeyFrame KeyTime="0:0:10" Value="Purple" />
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView Source="https://msdn.microsoft.com/library/windows/apps/xaml/mt244352.aspx" NavigationCompleted="WebView_NavigationCompleted">
    </WebView>
    <Grid x:Name="loadingGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="Visible">
        <TextBlock Text="On Loading..." FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock.Foreground>
                <SolidColorBrush x:Name="tbbrush" />
            </TextBlock.Foreground>
        </TextBlock>
    </Grid>
</Grid>

And code behind:

public MainPage()
{
    this.InitializeComponent();
    MyTextSTD.Begin();
}

private void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    loadingGrid.Visibility = Visibility.Collapsed;
}

Here is quite simple, I use a TextBlock and some color animation to show the message. And this message will disappear when the source of WebView is fully loaded.