Xamarin.Forms WebView

Hello, in this post we will talk about WebView with Xamarin.Forms, a WebView is a view that show a WebPage, or more simply HTML content.
We can define the instance of a webview on the next way:

 WebView webView= new WebView();
In the property Source we asign the source of our content for our WebView.

 Look a few piece of code:

public class WebViewPage : ContentPage
    {
        WebView webView{ get; set;} = new WebView ();
        public WebViewPage()
        {
            Label TitlePage = new Label {
                Text = "Use of WebView",
                FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center,
                TextColor=Color.White
            };
                        
            webView.Source = new UrlWebViewSource{ 
                Url = "https://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741" 
            };
            webView.VerticalOptions = LayoutOptions.FillAndExpand;


            this.Padding = new Thickness (10, Device.OnPlatform (20, 0, 0), 10, 5);

            this.Content = new StackLayout {
                BackgroundColor=Color.FromHex("#2196F3"),
                Children = {
                    TitlePage,
                    webView
                }
            };
        }
    }

We create a new instance of WebView
WebView webView{ get; set;} = new WebView ();

After, we add a Label to show as a Title, and define some attributes:

Label TitlePage = new Label {
                Text = "Use of WebView",
                FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center,
                TextColor=Color.White
            };


After that, we asign the source to webView, also how we want to show in the control:
    webView.Source = new UrlWebViewSource{ 
                Url = "https://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741" 
            };
            webView.VerticalOptions = LayoutOptions.FillAndExpand;


And to finish, add the Controls to the Content of the Page
this.Content = new StackLayout {
                BackgroundColor=Color.FromHex("#2196F3"),
                Children = {
                    TitlePage,
                    webView
                }
            };

Now, look the code running on iOS and Android:





More information in:
https://developer.xamarin.com/guides/cross-platform/xamarin-forms/


Follow me on Twitterhttps://twitter.com/OsvaldoSan
Or find me in Linkedinhttps://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741

Comentarios

Publicar un comentario

Entradas populares de este blog

Entry Show/Hide Password on Xamarin.Forms

Imagen
Hello, in this post i will talk about a way of how to implement a Show/Hide password on Entry control. In our Xamarin.Forms project, we add  a CustomRender for iOS, and  for Android we are using a Effects in order of have a result almost equals. I'm gonna start with the iOS functionality, so I will add a class render: using System ; using Xamarin.Forms ; namespace ShowHidePasswordEntryXF { public class ShowHidePasswordEntry : Entry { public ShowHidePasswordEntry () { } public string EntryText { get ; set ; } } } After that, in the iOS project, i will create the renderer, in which I add a UIButton and add a EventHandler in order to know if the user want to look the password or not: buttonRect . TouchUpInside   +=   ( object   sender ,   EventArgs   e1 )   = >                  {                      if   ( Control . SecureTextEntry )                      {                          Control . SecureTextEntry   =   false ;               
Leer más

Xamarin.Forms Frame

Imagen
Hello, in this post we gonna be look how we can use a Frame in Xamarin.Forms This simple rectangular view sometimes is very usefull for presentation purposes. The first, we add a new Page, called FramePage. in the constructor we add a new View, the Frame View, also we declare some properties, like OutlineColor, and if we want that has Shadow around of the frame:              this . Content   =   new  Xamarin . Forms . Frame   {              // It   has   a   few  properties                 OutlineColor = Color . Blue ,                 HasShadow = true , } So, to avoid that the frame fill all the page, we add the properties to center the frame inside of the page:                 HorizontalOptions = LayoutOptions . CenterAndExpand ,                 VerticalOptions = LayoutOptions . CenterAndExpand , And for last, we add the content of the frame, in this case we add a single Label, Content =   new   Label {                     Text = " This   is
Leer más

Xamarin.Forms Picker

Imagen
In this post, we gonna be see, the Picker Control in Xamarin.Forms The picker is a control that allows select one element from a predetermined list of options. The first thing that we need to do, is create a instance of Picker:             Xamarin . Forms . Picker   picker   =   new  Xamarin . Forms . Picker              {                 Title  =   " Chose   one   country " ,                 VerticalOptions  =   LayoutOptions . CenterAndExpand ,                 BackgroundColor = Color . Aqua              } ; Next, we need to asign the values for our Picker control, and we do it, on the next way:             picker . Items . Add   ( " Canada " ) ;              picker . Items . Add   ( " USA " ) ;              picker . Items . Add   ( " Mexico " ) ;              picker . Items . Add   ( " Brasil " ) ;              picker . Items . Add   ( " Argentina " ) ;              picker . Items . Add   ( &q
Leer más