CODEWITHSUNDEEP
c#xamarinxamarin.forms
Rippo
Rippo

Reputation: 22424

Binding a HTML control into a stacklayout using xamarin forms

Being a newbie to Xamrin I am struggling to adding some HTML to a StackLayout via Xamarin Forms. I have tried quite a few things and had a Google around.

Firstly I can't work out which bindable object I am supposed to be using. As I cannot find a straight answer on Google/Xamarin I am going to assume this is not as easy I was hoping. 

var nameEntry = new Label ();
nameEntry.SetBinding (Label.TextProperty, "Club.ClubName");

var webView = new WebView ();
webView.SetBinding ( ??? , "Club.Description");

var content = new StackLayout {

Children = {
    nameEntry, 
    ??? 
  }
};

I am not sure if this is possible within Xamarin forms itself. Can anyone help?

I should point out my data for the form is being retrieved asynchronously on a remote json endpoint

    protected override void OnAppearing ()
    {
        base.OnAppearing ();

        if (ViewModel == null || ViewModel.IsLoading)
            return;

        ViewModel.LoadItemsCommand.Execute (Club.ClubId);
    }

My remote json api contains, Description contatins a HTML snippet which I would like to use. 

{
  ClubName: "Stourbridge",
  Description: "<p>This club meets every TWO weeks on a <b>Friday</b>.</p>"
  ...
}

Upvotes: 1

Views: 2401

Answers (1)

Pete
Pete

Reputation: 4746

Try the following example that will show how to do the bindings.

Note that you have to use a HtmlWebViewSource to achieve this, and bind the WebView.Source to this.

Clicking the button will change the view model and update the WebView appropriately to the newly changed text.

        StackLayout objStackLayout = new StackLayout();

        MyView objMyView = new MyView();
        objMyView.MyHtml = "<html><head></head><body><h1>Title</h1><p>Some body text</p></body></html>";



        HtmlWebViewSource objHtmlWebViewSource = new HtmlWebViewSource();
        objHtmlWebViewSource.SetBinding(HtmlWebViewSource.HtmlProperty, "MyHtml");
        objHtmlWebViewSource.BindingContext = objMyView;


        WebView objWebview = new WebView();
        objWebview.HorizontalOptions = LayoutOptions.FillAndExpand;
        objWebview.VerticalOptions = LayoutOptions.FillAndExpand;
        objWebview.Source = objHtmlWebViewSource;


        Button objMyButton2 = new Button();
        objMyButton2.Text="Change Html";
        objMyButton2.Clicked+=((o2,e2)=>
        {
            objMyView.MyHtml = "<html><head></head><body><h1>Title</h1><p>Some body text that has changed.</p></body></html>";

        });

        objStackLayout.Children.Add(objMyButton2);
        objStackLayout.Children.Add(objWebview);

The view model is just a simple one with a bindable property as below:-

public class MyView
    : Xamarin.Forms.View
{

    public static readonly BindableProperty MyHtmlProperty = BindableProperty.Create<MyView, string>(p => p.MyHtml, default(string));

    public string MyHtml
    {
        get { return (string)GetValue(MyHtmlProperty); }
        set { SetValue(MyHtmlProperty, value); }
    }

}

Before clicking the button gives:-

enter image description here

After clicking the button, adjusts the view model, and automatically updates the control via the binding giving:-

enter image description here

Upvotes: 2

Related Questions