Making WebBrowser Transparent

2019-01-15 19:20发布

问题:

I am trying to make a WebBrowser control on my Windows 7 Phone app transparent, so it can have the same theme as the rest of the app, but I have had no success with anything I have tried. I need to still be able to see the HTML text, but just have the background be transparent. Using CSS in the control doesn't seem to work, and I can't get it to work via XAML either. Is this possible? This post, was not encouraging.

回答1:

This isn't possible. The browser engine always renders a background color for the HTML page. You can assign a color to the BODY tag but a value of 'transparent' will always end up white. The Background color you assign to the WebBrowser XAML element really has no effect as the browser engine essentially renders over the top of it.

Your best bet to match your app theme is to pass the app theme background color into the HTML page via InvokeScript to a Javascript function that will then set it on the BODY element. This assumes that you have control of the HTML content you are loading. (Also, don't forget to enable script via IsScriptEnabled.)



回答2:

As an alternative to (or maybe in addition to) trying to load some initial content to set the webbrowser control to be showing a color to match the page background you could just set the opacity of the control to be 0 and then change it to 1 when the Navigated event on the control is fired for the first time.



回答3:

Code-solution:

private void SetHtml(WebBrowser browser, string body)
{
    string style = "<style>";
    string background = GetColorForCss("PhoneBackgroundColor");
    string foreground = GetColorForCss("PhoneForegroundColor");
    style += "body{background-color: " + background + "; color: " + foreground + ";}";            
    style += "</style>";
    string html = "<!DOCTYPE html><html><head>" + style + "</head><body>" + body + "</body></html>";

    Color phoneBackground = (Color)Application.Current.Resources["PhoneBackgroundColor"];
    browser.Background = new SolidColorBrush(phoneBackground);
    browser.Opacity = 0;
    browser.NavigateToString(html);
    browser.LoadCompleted += browser_LoadCompleted;


}

void browser_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
    _browser.OpacityMask = null;
    _browser.Opacity = 1;
}


回答4:

you can style the html content displayed in the webbrowser component, so the component will have the look and feel of your app

            web_browser.NavigateToString(html: "<html style='background-color:" + BACKGROUND_THEME_COLOR + ";color:" + FOREGROUND_THEME_COLOR + ";font-size:15pt;'>" + your_html_content + "</html>");