Windows App Progress Bar

Question

I used a Windows App template to create a webview and load my responsive website within that webView. I tried to use the ProgressRing to show the users that the app is loading till the pages are fully loaded. The ProgressRing is coming but is not going away. Below is the actual code of my app.

A quick help would be highly appreciated. Thanks!

MainPage.xaml:

x:Class="Zify.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Zify"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <WebView Name="webView1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="650" Width="400"/>
    <ProgressRing Name="progress" " IsActive="True" Foreground="#FFE74C3A"/>

MainPage.xaml.cs:

namespace Zify
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.NavigationCacheMode = NavigationCacheMode.Required;
            Uri targetUri = new Uri(@"https://zify.com/index.htm");
            webView1.Navigate(targetUri);
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.
        /// This parameter is typically used to configure the page.</param>

        // Event handler for the system's DisplaySettingsChanged event.
        // Detect and then compare the height and width of the screen.
    }
}

Answer 1

将Grid.Row =“ 1”添加到ProgressRing

Answer 2

Try adding this line to transfer the control to the event which determines whether the Webview control has fully loaded the webpage.

WebView1.LoadCompleted += new Windows.UI.Xaml.Navigation.LoadCompletedEventHandler(WebView1_LoadCompleted);

Then stop the Progress Bar once it's fully loaded!

void WebView1_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
 //code for hiding progress bar/ring
 ProgressRing1.IsActive = false; //for progress ring
 ProgressBar1.IsIndeterminate = false; //for progress bar
}

Source: show progress bar/ring in windows 8 app while a webpage is loading in webview control