ASP.NET Internationalization – Themes

OLYMPUS DIGITAL CAMERA         A couple of weeks ago I started a series on ASP.NET Internationalization where we started by covering the basics, that is, using RESX files to supply language-specific strings in our code.

However, as anyone who’s tried to tackle the the internationalization problem knows, strings aren’t the only items that are impacted by internationalization. What about the images on our site? Specifically, what about the images that make up the look and feel of our site?

One of the ways you can deal with this issue is by using the ASP.NET Themes feature. This is not the ONLY way to deal with internationalization at the graphics level, but in my experience, it is the best way. I’m open to suggestions if you want to leave a comment.

We are going to assume for the purposes of this post that you already know how to use the ASP.NET themes and skin files in your code. What we need to address is how to change the theme on the fly as the page is being rendered.

You might think that changing the theme just means that all you have to do is to set the Page.Theme or Page.StyleSheetTheme property during the Page_Onload method. But if you do that, you’ll quickly find that you generate an error at runtime. What you have to do instead is to set the property during the OnPreInit method, which you can override from the base class:

protected override void OnPreInit(EventArgs e)
{
    base.OnPreInit(e);
}

From here it is a simple matter of detecting the culture and region information and setting the Theme property to the appropriate theme for that culture and region:

protected override void OnPreInit(EventArgs e)
{
    base.OnPreInit(e);
    string currentCulture =
        Thread.CurrentThread.CurrentUICulture.Name;
    if (currentCulture.StartsWith("fr"))
        Page.Theme = "Main.fr-CA";
    else
        Page.Theme = "Main";
}

Now, if you are sitting here thinking you have to add this code to every page in your applications, you don’t understand inheritance. What you really want to do is to create a base class in your code that all of your pages will inherit from. Once they inherit from this new class, they will automatically pick up the theme switching behavior:

public class BasePage : System.Web.UI.Page
{
    public BasePage()
    {
    }
    protected override void OnPreInit(EventArgs e)
    {
        base.OnPreInit(e);
        string currentCulture =
            Thread.CurrentThread.CurrentUICulture.Name;
        if (currentCulture.StartsWith("fr"))
            Page.Theme = "Main.fr-CA";
        else
            Page.Theme = "Main";
    }
}

Then in our regular page code we replace System.Web.UI.Page with BasePage

public partial class _Default : System.Web.UI.Page

becomes

public partial class _Default : BasePage

The only other change we need to make is a small tweak to protect the other programmers on the team from themselves.

There is another property hanging off the Page object that allows us to set the theme and that is the StyleSheetTheme. The difference between the two properties is where the resulting <link> code gets placed in the header. Again, I’m going to assume that you already know the difference. The issue is that you can’t set both the Theme property AND the StyleSheetTheme property. You can’t even set one to NULL and the other to the string you want to use. So what happens if the base class sets the Theme property and one of your developers set the StyleSheetTheme property?

Your theme switching code will crash. And who will everyone point their finger at when that happens? You guessed it, the guy who wrote the code.

So here’s how to set the theme switching code up so that it never looks like the problem is your code. You override the StyleSheetTheme property (or if you are setting the StyleSheetTheme property, then override the Theme property–they work the same way for this solution.) and have the property return NULL.

public override String StyleSheetTheme
{
    get { return null; }
}

Now all you need to do is put your references to the language-specific images in Skin code and you’ll be able to switch from one language set to the other.

Related Post

  • Two CSS Files When Using ASP.NET Themes?Two CSS Files When Using ASP.NET Themes? One of the projects that I'm working on is for a company targeting the Canadian marketplace.  These sites have to be written in both French and English for that country, which means there is a fair...
  • Silverlight – RESX Files and InternationalizationSilverlight – RESX Files and Internationalization One of the toughest things to get your head around in Silverlight is Internationalization and Localization.  But once you figure out the quirks and the parts that are missing in Visual Studio...
  • Internationalization – The DatabaseInternationalization – The Database Over the last several weeks we’ve been examining the various aspects of internationalization using ASP.NET. But it doesn’t help to have your resources and images set up for internationalization i...
  • Structure of my ASP.NET Web ApplicationsStructure of my ASP.NET Web Applications I’ve had some requests recently to describe how I structure my ASP.NET web applications.  To be clear, this is not the only way to structure your application.  It is MY way.  It wor...
  • Internationalization – Resource FilesInternationalization – Resource Files Today I'm going to start a series on Internationalization.  Today's post will start with the basics, but I plan to cover such issues as: Using Resources Detecting the language of the browser...