How To: Creating an ASP.NET Font Viewer

After creating this article, i realized that i can use a new utility in my toolbox. A Font Viewer. I don't want to download a new spyware so decided to code a simple one, something that i could use from time to time whenever i have the need to view a font before placing it on my Photoshop design(i do photoshop and flash on the side in my current job).

Ok, so now let's organize what we need to do. First, we need to get a list of Fonts installed in our machine. For this demo i'll just copy the code from our old sample and just modify it a little bit to fit our needs. below is the completed Fonts class:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
using System.Drawing;
using System.Drawing.Text;

/// <summary>
/// Summary description for Fonts
/// </summary>
public class Fonts
{
   public static IEnumerable GetFonts()
   {
      InstalledFontCollection installedFonts = new InstalledFontCollection();
      //iterate thru each font
      foreach (FontFamily fontFamily in installedFonts.Families)
      {
         //return a new FontName
         yield return new FontName(fontFamily.Name);
      }
   }

   public class FontName
   {
      string _name;

      public FontName(string name) { _name = name; }

      public string Name { get { return _name; } }
      public override string ToString() { return _name; }
   }
}

The next step is to have a GridView that will hold our data. We need to add to columns, one for the Font Name and another to display what font looks like(it wouldn't be a font viewer after all without this column :P). Below is hot the GridView templates would look like:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
   <Columns>
      <asp:BoundField DataField="Name" HeaderText="Font Name" />
      <asp:TemplateField HeaderText="">
         <ItemTemplate>
            <asp:Label ID="fontLabel" runat="server" Font-Size="XX-Large"></asp:Label>
         </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

The last step is to bind the data to our grid. One thing to note is that i decided to put some code in the RowDataBound event of our GridView so that i could inject some custom code for our records. This is where we would be assigning the Font to our label control.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Text;
using System.Collections;

public partial class FontPage : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      if (!IsPostBack)
      {
         //Bind our Fonts to our GridView
         fontGrid.DataSource = Fonts.GetFonts();
         fontGrid.DataBind();
      }
   }

   protected void fontGrid_RowDataBound(object sender, GridViewRowEventArgs e)
   {
      string smallLetters = "abcdefghijklmnopqrstuvwxyz";
      string capitalLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      string numbers = "0123456789";
      string lineBreaks = "<br>";
      //Find our label
      Label fontLabel = (Label)e.Row.FindControl("fontLabel");
      //check if the label is found
      if (fontLabel != null)
      {
         //create new FontName based on the DataItem
         Fonts.FontName fontName = (Fonts.FontName)e.Row.DataItem;
         //assign the FontName to the Label
         fontLabel.Font.Name = fontName.Name;
         //assign our display string;
         fontLabel.Text = string.Format("{0}{1}{2}{3}{4}", smallLetters, lineBreaks, capitalLetters, lineBreaks, numbers);
      }
   }
}

Here's the screenshot of our completed project:

That's it. A simple ASP.NET font viewer. Not really functional other than displaying a listing of fonts but it sure does serve its purpose.

Download the code here: KeithRull.FontPage.zip (3 KB)