locked
How to use CSS with Windows 8 Webview Control? RRS feed

  • Question

  • I have a question about window's 8 apps Webview Control , is there anyway to use CSS to manage the look of the webview , i'm using it here to view a returned contents of a feeded HTML data but as you can see it's striped from all the CSS , so is there anyway that I can manage the CSS for the Webview ?

    This is the code :

    void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
    
    
                //  this code to populate the web view
                //  with the content of the selected blog post.
                // I'm passing the selected item from the previous items' page
                // and then pouplate the web view with the selected item Contents of the feed 
    
    
                if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();
    
                Selector list = sender as Selector;
                FeedItem selectedItem = list.SelectedItem as FeedItem;
                if (selectedItem != null)
                {
                    this.contentView.NavigateToString(selectedItem.Contents);
                }
                else
                {
                    this.contentView.NavigateToString("");
                }  
    
            }

    Wednesday, January 30, 2013 6:25 PM

Answers

  • It would be just about as simple to load your CSS into a text file, load that file into a string and then add it to your NavigateToString code.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by ALBIHANY-ADEN Thursday, January 31, 2013 11:59 PM
    Thursday, January 31, 2013 4:10 PM
    Moderator

All replies

  • Hey come on I really need a help with this :(

    Wednesday, January 30, 2013 11:09 PM
  • The WebView control is just an HTML renderer. If your HTML has CSS it will render it fine. If the HTML coming from selectedItem.Contents is user input or out of your control and it doesn't have CSS in it and you want to "impose" some CSS styling on it then you have two options (in my opinion, but there could be more)

    Option 1:

    Parse the HTML string, look for "</head>" and add some inline CSS above that using similar to this:

    string myStyledHTML = selectedItem.Contents.ToString().Replace("</head>", "<style type='text/css'> body {background-color:yellow;} p {color:blue;} </style></head>");

    this.contentView.NavigateToString(myStyledHTML);

    Obviously this could be a string variable that you have instead of hardcoded in the Replace line

    Option 2:

    Your app can have an HTML page that you can navigate to using WebView.Navigate(your HTML page URI here) and you can pass the HTML string to the page as a querystring or a post variable and you can do whatever you need to do in that HTML using Javascript. Your app could also have a CSS file in the same folder as the HTML file and you can reference that in your HTML file, but you'll have to parse out the<html>, <head>, and <body> tags from the HTML string in selectedItem.Contents.

    Hope this is clear enough and helpful.



    • Edited by arabisoft Friday, February 1, 2013 2:37 AM
    • Proposed as answer by arabisoft Friday, February 1, 2013 2:39 AM
    Thursday, January 31, 2013 4:52 AM
  • Greeting sir,

    First of all let me thank you for your supportive answer , it does really have some useful and informative tips , let me explain what is (selectedItem.Contents ) it is actually a data that i'm receiving it from a rss feed as a string and the string is mixed of HTML Tags and text data it actually get rendered well by the webview control , however it's all striped from the CSS , i don't want to use the website link because it will render the pages as they are , they will not look well on my app's UI ,but it will be great if i can only customize the look of  that mixed data i'm receiving.

    yesterday after i posted this question i tried to insert some styles as a string variable and it worked very well the code was as fallowing :

     string style = "<style media='screen' type='text/css'>"
    
                                + "  body{ background-color:#999999;} " +
                                 " p {text-shadow: black 0.1em 0.1em 0.2em; " +
                                  " color:white; }" +
                                       " </style>";
                    this.contentView.NavigateToString(style + selectedItem.Contents);

    but my ultimate aim is instead of having to insert all the style of CSS in code behind as string , is to have only a link to a CSS file that have all the CSS settings , i tried that as following but unfortunately it didn't work for me , i don't know what was wrong perhaps it was a mistake in my code it was like this :

    string csslink = " <link rel='stylesheet' type='text/css' href='Blogstyle.css' media='screen' />";
    
     this.contentView.NavigateToString(csslink + selectedItem.Contents);

    So my question is there anyway that i can add a link to a CSS file in my project to as a string to my Webview Control ?
    Thursday, January 31, 2013 5:47 AM
  • It would be just about as simple to load your CSS into a text file, load that file into a string and then add it to your NavigateToString code.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by ALBIHANY-ADEN Thursday, January 31, 2013 11:59 PM
    Thursday, January 31, 2013 4:10 PM
    Moderator
  • I guess that will do the trick ....

    cheers mate

    Thursday, January 31, 2013 11:59 PM