Binding the navigate URL and navigate events to a webview using MVVM

Question

Hello all,

I am trying to bind the View Model with a Webview (present in View component) to set the navigation URL and navigation events.

Referring to this article below:

http://marcominerva.wordpress.com/2013/06/11/how-to-use-binding-to-set-the-webview-url-in-a-windows-store-app/

The URL is taken correctly once. When I try to update my property from the View Model, the Webview doesnot become visible and navigation doesn't start. Here is the snippet of code, (apart from the static dependency property as suggested in the article)

View Model part:

                                                                                             
public class ViewModel : INotifyPropertyChanged
    {


        private Windows.UI.Xaml.Visibility _webViewVisibility;
        public Windows.UI.Xaml.Visibility webViewVisibility
        {
            get
            {
                return this._webViewVisibility;
            }
            set 
            {
                this.webViewVisibility = this._webViewVisibility;
                NotifyPropertyChanged("webViewVisibility");
            }
        }

        private string _webViewURISource;
        public string webViewURIsource
        {
            get
            {
                return this._webViewURISource;
            }
            set
            {
                this.webViewURIsource = this._webViewURISource; 
                NotifyPropertyChanged("webViewURIsource");
            }
        }

        public ICommand GoButtonCommand { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

         public ViewModel()
        {

            this._webViewVisibility = Windows.UI.Xaml.Visibility.Collapsed;
            this._webViewURISource = "";

            this.GoButtonCommand = new DelegateCommand(_GoClickCommand);
        }

       
        private void _GoClickCommand(object args)
        {
            if (this._IsValidHostName(args.ToString()) == true)
            {


                this._webViewURISource = this._GetURL(this._hostNameText);
                NotifyPropertyChanged("webViewURISource");

                //Make the Webview visible
                this._webViewVisibility = Windows.UI.Xaml.Visibility.Visible;
                NotifyPropertyChanged("webViewVisibility");

            }
            
        }

        private bool _IsValidHostName(string hostname)
        {
            return Uri.CheckHostName(hostname) != UriHostNameType.Unknown;
        }

        private string _GetURL(string hostname)
        {
            // do something to generate UriString
            return UriString;

        }
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this,
                    new PropertyChangedEventArgs(propertyName));
            }
        }
 }                

                                                                                                                                               

and in my xaml code this is the snippet:  

<WebView local:WebViewExtensions.UriSource="{Binding Path=webViewURIsource, UpdateSourceTrigger=PropertyChanged}" x:Name="MyWebView" HorizontalAlignment="Left" Height="611" Margin="10,10,0,0" VerticalAlignment="Top" Width="342" Visibility="{Binding Path=webViewVisibility}" />

The Static WebViewExtensions has been implemented as shown in the article and the values for UriSource is picked only once at the startup and not after the property is changed.

Is there anything else I need to add ?

Any help would be appreciated. thanks!

Regards

Sreeram

Answer 1

If you debug this does the UriSource's change handler get called? Does it call WebView.Navigate? If so, does it succeed if the WebView is visible?

Answer 2

Hi Rob,

Yes the UriSource's Change handler gets called on debugging, but only the very first time. When I fire Notify Property Changed on the webViewUriSource Property, it does not get triggered. In the second time, the Webview also doesn't get visible.

What I want to achieve is when a user enters a URI in textbox, I want to bind it to the webview and the webview should start with that Navigation URI.

Regards

Sreeram

Answer 3

In the setter for your properties you need to set the internal variable to value, not set the property to the internal value. You're not changing the property, so the binding doesn't trigger.

Replace this:

            set
            {
                this.webViewURIsource = this._webViewURISource; 
                NotifyPropertyChanged("webViewURIsource");
            }

with this:

            set
            {
                this._webViewURIsource = value; 
                NotifyPropertyChanged("webViewURIsource");
            }

Answer 4

Thanks Bob, it worked.