How to use GDI+ with ASP.NET controls

Welcome to TheCredence.com - You may like to subscribe to our RSS feed to stay updated.

This is going to be the last ASP article in the series of ASP articles that I have written (in Total 10). You can check the other 9 here. In this article I am going to talk about GDI and ASP.Net Controls.

Using GDI+ with ASP.NET controls

GDI+ is the basic drawing model for all the .NET applications. It is used to draw on controls, images, printer documents and also asp pages. Using GDI is more than necessary when improving the user interface of a windows application. Using the GDI+ is not the point of this article so we will not go in great detail. It’s not the same in asp.net. As the end product of the compilation of ASP page on the server is a native html code sent to the browser the technology of drowning on the controls’ surface will not work.

Drawing techniques with GDI and ASP

Instead of drawing in the device context of a control like the ordinary windows control does we should create an image first, draw in it and the output to browser. Sending the image to browser will be managed trough the response’s stream by exactly copying the image stream on. Therefore we can conclude that showing dynamic image is slower than presenting a static one. So we should use GDI+ in ASP.NET only when we need to be shown any visual content dynamically.

Let’s take the fallowing example. We will create a simple image with 150x150 pixels sized with black border and Blue fill. There will be placed some text.
1. Create new ASP.Net web site, and put some code in the Page_Load event handler.

 
protected void Page_Load(object sender, EventArgs e)
{
	System.Drawing.Bitmap img = new System.Drawing.Bitmap(150, 150);
	System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(img);
	g.Clear(Color.Blue);
	g.DrawRectangle(Pens.Black, new Rectangle(0, 0, 149, 149));
	g.DrawString("Dynamic image", new Font("Arial", 12, FontStyle.Bold), Brushes.Black,new PointF(5, 20));
	img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif);
	g.Dispose();
	img.Dispose();
}
 

In this case every other information containing in the aspx page will be erased and replaced by the image. Gif image format is faster to show than jpg and often is better choice, but it does support a small range of colors. It has a 256 generic colors palette and any other color will be presented dithered. Using jpg sometimes makes strings fuzzy. If you use .png format you will experience problems with the code above. The reason is that .png format needs a searchable stream to be saved and the Output stream of the response is not of this type. Instead we will save the .png image to MemoryStream then copy it to OutputStrem.

Showing dynamic graphics to user in this way isn’t good idea, is it? We need showing the graphics inside a specific part of the web page, not erasing it entirely.

Enhancing usability

There are two variants to show built dynamic images in to Pages without copying to their output stream. Both of them use the same technique. An element with src property set to another page predefined outputstream.

Let’s see the first variant. Create new aspx page then put the code similar to above in the Page_load.

 
protected void Page_Load(object sender, EventArgs e)
{
        string color = Server.UrlDecode(Request.QueryString["Color"]);
        System.Drawing.Bitmap img = new System.Drawing.Bitmap(150, 150);
        System.Drawing.Graphics g =
                      System.Drawing.Graphics.FromImage(img);
        g.Clear(Color.FromName(color));
        g.DrawRectangle(Pens.Black, new Rectangle(0, 0, 149, 149));
        g.DrawString("Color: " + color,
            new Font("Arial", 12, FontStyle.Bold), Brushes.Black,
            new PointF(5, 20));
        img.Save(Response.OutputStream,
                            System.Drawing.Imaging.ImageFormat.Gif);
        g.Dispose();
        img.Dispose();
}
 

Now a parameter is used to detemine the color of background.
Next put some html elements in the default page and a dropDown with different colors, and enable autopostback property. The page’s body definition should look like:

 
<form id="form1" runat="server">
<div style="text-align: center">
        <span style="font-size: 16pt"><strong>This is a page with dynamic
             image below</strong></span>
 
        <img src='<%# GetColor()%>' alt = "no img" />
 
        <asp:DropDownList ID="dropDownList" runat="server"
              AutoPostBack="True" Width="152px">
            <asp:ListItem>Green</asp:ListItem>
            <asp:ListItem>Blue</asp:ListItem>
            <asp:ListItem>Red</asp:ListItem>
        </asp:DropDownList></div>
</form>

The GetColor() method supplies the following data.

 
public String GetColor()
{
    return "ImageCreator.aspx?Color=" + dropDownList.SelectedValue;
}
 

Don’t forget to data bind the page.

As you see the img points to the Outputstream of the ImageCreator.aspx page which is used to present the dynamic image.

The second variant is to create a custom control and in the Render method to write the above mentioned html element.

Links you may find interesting -