Introduction
Imagine that you are going to develop the site which supports multiple languages. The user can select a language to view the site or you can detect his/her browser setting to display your site in his/her mother language.
Background
I like the DynamicImage control which is not shipped with VisualStudio.NET 2005 release version. It is a demo on easy to use DynamicImage control to display a Bitmap object (a stream) gets from resource file. You need to have some background about Localized Resource.
Using the Code
In this demo, I will explain how to use Localized Resource in ASP.NET 2005 and DynamicImage control to display an image from a stream.
1. Working with Localized Resource
You need to create a default resource file first. Right click on the Web Project and select Add New Item, select Resource File in the Templates and name it as MyResource.resx. It will prompt to ask you to put the file in App_GlobalResources folder.
Enter resource text as below:
We will support English, Vietnamese, Korean, German, and French. Each localized resource file name needs to follow the format:
[DefaultResource].[LanguageCode]-[Region].resx
For example, we have MyResource.resx as the default resource file for English-US. For Vietnamese resource files, we will have MyResource.vi-VN.resx where "vi" is Vietnamese language code and "VN" is region code. You can find all of the language and region codes here.
Here is the Project Explorer that we have:
Enter Resource item for each language by double clicking on a resource file. The Name column is key and must be the same in every resource file. The Value column is a string in the specified language. Below is the resource file for Vietnamese language.
Resource file can contain string, image, icon, audio, file, etc. In this demo, I will add flag image into each localized resource file to display country flag. Double click on MyResource.resx to open Resource Editor for default resource file, select Images:
Then select Add Resource -> Add Existing File and select a flag image file.
Each resource file should contain an image resource call "Flag" which is the flag for each country.
We already set up for resource files. Now we need to design Default.aspx.
<body>
<form id="form1" runat="server">
<asp:Label ID="helloLabel" runat="server" Text="Hello" ></asp:Label>
<asp:Image ID="flagImage" runat="server" />
<br />
<asp:Label ID="selectLanguageLabel" runat="server" Text="Select a Language" >
</asp:Label>
<asp:DropDownList ID="languageDropDownList" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged = "languageDropDownList_SelectedIndexChanged">
</asp:DropDownList>
</form>
</body>
Now in the Page_Load, we need to populate some languages in the dropdown list and get setting language from Request object and display the page in the selected language. Explore the code yourself as it is self-explained:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
languageDropDownList.Items.Add(new ListItem("English", "en-US"));
languageDropDownList.Items.Add(new ListItem("Vietnamese", "vi-VN"));
languageDropDownList.Items.Add(new ListItem("French", "fr-FR"));
languageDropDownList.Items.Add(new ListItem("Korean", "ko-KR"));
languageDropDownList.Items.Add(new ListItem("German", "de-DE"));
ListItem settingLanguage = languageDropDownList.Items.FindByValue
(Request.UserLanguages[0]);
if (settingLanguage != null)
{
settingLanguage.Selected = true;
}
else
{
languageDropDownList.SelectedIndex = 0;
languageDropDownList.AutoPostBack = true;
}
}
LoadResource(languageDropDownList.SelectedItem.Value);
}
Working with localized resources in ASP.NET 2005 is much easier. We do not need to create an instant of ResourceManager to retrieve the resources. Remember we have a default resource file named MyResource.resx. You can use this name as an object. Take a look at the LoadResource function:
private void LoadResource(string lang)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo(lang);
Thread.CurrentThread.CurrentCulture =
CultureInfo.CreateSpecificCulture(lang);
helloLabel.Text = MyResource.Hello;
selectLanguageLabel.Text = MyResource.SelectLanguage;
MyResource.Flag.Save(Server.MapPath("") + \\flag.jpg,
System.Drawing.Imaging.ImageFormat.Jpeg);
flagImage.ImageUrl = "~/flag.jpg";
}
To access MyResource, you call System.Resources.MyResource whereas System.Resources is the namespace you can "include":
using System.Resources;
You need to set Thread.CurrentThread.CurrentUICulture to locate the right resource file based on the input language. One more thing you need to be aware of is that image resource is a stream and you cannot set a stream to image control. You need to save the Flag resource to your local disk and set ImageUrl to this temp image file.
2. DynamicImage
You see the problem of using Image control that we cannot set a stream of image. Dynamic Image control can help you. If you need more information about DyanamicImage, please read this.
You can download the source code from that site, add DynamicImage project into our solution, add reference to this DynamicImageControl and try it. We will add Default2.aspx and set this as the Start Page. You have to Register the DynamicImage control using the Register directive:
<%@ Register Assembly="DynamicImage" Namespace="MsdnMag" TagPrefix="dimage" %>
Here is the inside of the body tag of Default2.aspx:
<form id="form1" runat="server">
<asp:Label ID="helloLabel" runat="server" Text="Hello" ></asp:Label>
<dimage:DynamicImage ID="flagImage" runat="server" />
<br />
<asp:Label ID="selectLanguageLabel" runat="server" Text="Select a Language" >
</asp:Label>
<asp:DropDownList ID="languageDropDownList" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="languageDropDownList_SelectedIndexChanged">
</asp:DropDownList>
</form>
What you need to do with DynamicImage control is this line:
flagImage.Image = MyResource.Flag;
MyResourceFlag.Flag returns a stream (a Bitmap object) and you set it to flagImage control. That's it.
History
- 2nd May, 2007: Initial post
