Freigeben über

Blending the WebBrowser Control with your App

  • Artikel

In my last post, I talked about the risks of failing to adapt your app to the selected user theme with the consequence, in that particular case was failing Marketplace certification.

There are other good reasons to adapt to the selected theme of course, primarily for aesthetics and user-experience. One example I talked about some time ago was integrating the WebBrowser control with the current theme.

Again I used this technique recently – the specific (and slightly simplified from the original approach) code is below.

 using System.Windows;
using System.Windows.Media;
using Microsoft.Phone.Controls;

namespace WindowsPhoneApplication1
{
  public partial class MainPage : PhoneApplicationPage
  {

    // These constants only here to avoid line
    // wrapping below
    private const string pdtv = "PhoneDarkThemeVisibility";
    private const string pbb = "PhoneBackgroundBrush";

    public MainPage()
    {
      InitializeComponent();
      Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
      webBrowser1.NavigateToString(FormatHtmlString("Lorem" + 
        " ipsum dolor sit amet, consectetuer adipiscing " +
        "elit.Maecenas porttitor congue massa. Fusce " + 
        "posuere, magna sed pulvinar ultricies, purus " +
        "lectus malesuada libero, sit amet commodo magna" +
        "eros quis urna."));
    }

    private string FormatHtmlString(string htmlContent)
    {
      return string.Format("<html><head>" + 
        "<style type='text/css'>" +
          "body {{font-size:1.0em;background-color:{0};" + 
            "color:{1};}} " +
        "</style>" +
        "</head>" +
        "<body>{2}</body>" +
        "</html>",
      FetchBackgroundColor(),
      FetchFontColor(),
      htmlContent);
    }

    private string FetchBackgroundColor()
    {
      return IsBackgroundBlack() ? "#000;" : "#fff";
    }

    private string FetchFontColor()
    {
      return IsBackgroundBlack() ? "#fff;" : "#000";
    }

    private bool IsBackgroundBlack()
    {
      return ((Visibility)Application
        .Current
        .Resources[pdtv] == Visibility.Visible);
    }

    private void SetBrowserBackground()
    {
      webBrowser1.Background = 
        (Brush)Application.Current.Resources[pbb];
    }
  }
}

This results in the output below for each of the background themes nicely blending the WebBrowser control with the phone’s current theme.

imageimage