CODEWITHSUNDEEP
c#webviewxamarin.formshtml-agility-pack
Bartek Cebo
Bartek Cebo

Reputation: 35

Xamarin.forms - Displaying content with WebView

I'm creating a mobile app of existing website. I use HTMLAGILITYPACK to scrap some data from website. I want to display them in my app. But there is no result and nothing displays.

This is my App code with "scraper":

namespace Apka
{
public partial class App : Application
{
    public static string DocumentPath = 
Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
    public static string strona = "";


    public static NavigationPage NavigationPage { get; private set; }
    WebRequest request = HttpWebRequest.Create("www.wiocha.pl");
    WebResponse response;

    public App()
    {


        InitializeComponent();

        starthttp();





        NavigationPage = new NavigationPage(new MainPage());
        RootPage rootPage = new RootPage();
        MenuPage menuPage = new MenuPage(rootPage.vm);

        rootPage.Master = menuPage;
        rootPage.Detail = NavigationPage;
        MainPage = rootPage;

    }


    private async void starthttp()
    {

        response = await Task.Factory.FromAsync<WebResponse>(request.BeginGetResponse, request.EndGetResponse, null);

        var html = new HtmlDocument();
        html.Load(response.GetResponseStream());
        var nodes = html.DocumentNode.Descendants("img")
            .Where(node => node.GetAttributeValue("class", "")
               .Equals("imageitself")).ToList();





        foreach (var node in nodes)
        {

            strona = strona + node.OuterHtml;

        }

        System.Diagnostics.Debug.WriteLine(strona);




    }
}

} In console it returns some img in html like img src="link" class="imageitself" alt="blablabla"

Here is my page where im trying to place scraped pictures:

namespace Apka.View.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {



        public MainPage()
        {
            InitializeComponent();

            WebView webView = new WebView
            {
                Source = new HtmlWebViewSource
                {
                    Html = @"<!DOCTYPE html><html><head><style>img { width:100%; }</style></head><body>" + App.strona + @"</body></html>",
                },
                VerticalOptions = LayoutOptions.FillAndExpand

            };



            /* ViewModel.Pages.MainPageViewModel vm = new ViewModel.Pages.MainPageViewModel();
             this.BindingContext = vm;*/
        }





    }
}

And XAML code to this page looks like that:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="" (cant place links)
         xmlns:x="" (here too)
         x:Class="Apka.View.Pages.MainPage">


<ContentPage.ToolbarItems>
    <ToolbarItem Command="{Binding MenuItem1Command}" />
</ContentPage.ToolbarItems>
<ContentPage.Content>

    <StackLayout BackgroundColor="#505050" VerticalOptions="FillAndExpand" 
HorizontalOptions="FillAndExpand">



    </StackLayout>

</ContentPage.Content>
</ContentPage>

Why webview doesn't work? What should I do to display these pictures?

Upvotes: 1

Views: 8552

Answers (2)

Daniel Tovar
Daniel Tovar

Reputation: 31

On the page where declaring the WebView, when is added into a stacklayout needs specified the WidthRequest and HeightRequest of the WebView for displayed, not occurs when is added into a GridLayout, for this case

namespace Apka.View.Pages
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{



    public MainPage()
    {
        InitializeComponent();

        WebView webView = new WebView
        {
            Source = new HtmlWebViewSource
            {
                Html = @"<!DOCTYPE html><html><head><style>img { width:100%; }</style></head><body>" + App.strona + @"</body></html>",
            },
            VerticalOptions = LayoutOptions.FillAndExpand,
            WidthRequest = 1000,
            HeightRequest=1000

        };



        /* ViewModel.Pages.MainPageViewModel vm = new ViewModel.Pages.MainPageViewModel();
         this.BindingContext = vm;*/
    }
}
}

Upvotes: 1

Paul Kertscher
Paul Kertscher

Reputation: 9713

You are creating your WebView with the following code

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        WebView webView = new WebView
        {
            // elided
        };


        /* ViewModel.Pages.MainPageViewModel vm = new ViewModel.Pages.MainPageViewModel();
         this.BindingContext = vm;*/
    }

Anyway, there is no place where you are adding the WebView to your page. If you really want to create the WebView from code, you'll have to give a name to the StackLayout

<StackLayout x:Name="StackLayout" ...>

and then add the WebView from your MainPage constructor.

StackLayout.Children.Add(webView);

Anyway, there is nothing that prevents you from creating he WebView from XAML

<StackLayout BackgroundColor="#505050" 
             VerticalOptions="FillAndExpand"  
             HorizontalOptions="FillAndExpand">
    <WebView x:Name="WebView" VerticalOptions="FillAndExpand />
</StackLayout>

and then simply set the source in code behind 

public MainPage()
{
    InitializeComponent();

    WebView.Source = new HtmlWebViewSource
                     {
                         Html = @"<!DOCTYPE html><html><head><style>img { width:100%; }</style></head><body>" + App.strona + @"</body></html>",
                     };
}

Upvotes: 3

Related Questions