Click here to Skip to main content
15,867,756 members
Articles / Desktop Programming / XAML

My Silverlight Barcode Software

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
18 May 2009BSD5 min read 45K   2.4K   33   6
Barcode software application in Silverlight.

My Silveright Barcode Software

Introduction

This is a follow up to the WPF Barcode Software project. It shows how we can use the Microsoft Silverlight technology to build a barcode software application. The nice thing about this barcode software is that you can run it in any browser that supports Silverlight. The source files requires at least Visual Web Developer 2008 Express Edition in order to compile.

The Project

The project consists of two C# subprojects:

(1) SilverlightBarcodeClassLibrary

This library is derived from the source code of the Code39 barcode of the WPF Barcode Software project. The input and output properties and the methods of the Barcodes class are almost identical. For your convenience, they are reproduced below:

Input Properties

  • BarcodeType - There are many types of barcodes used in real life. For example, those used in retail are different from those used in warehouses and logistics. Currently, the barcode library implements a simple but widely used barcode symbology known as Code 39. This barcode is also known as Code 3 of 9. This barcode accepts only upper case characters 'A' to 'Z', the numeric digits '0' to '9', and a few special characters. If you enter any other characters to the Data string, they will be ignored and filtered away.
  • The Code 39 barcode has the advantage of being simple, as each of the characters are represented by a pattern of 10 alternating white and black bars. However, because the algorithm does not include much compression, the resulting barcode out is not very dense. In other words, you get a rather long barcode for a short data string.

  • Data - This is the data to be encoded. For our WPF application, we have used "1234567" as the Data input string.
  • CheckDigit - Some barcodes specify that a check digit must be included into the barcode. The check digit is usually an additional character (or several characters) that is appended to the input Data string and encoded into the barcode. The CheckDigit helps the scanner to verify that the data that it reads is correct and complete. For the Code39 barcode, the CheckDigit is optional. You can specify Yes or No to include or exclude it.

Main Method

  • encode() - After you have specified the input properties, you can start letting the barcode class to create the black and white bars. This is done by calling the method encode(). When this is done, you can start retrieving the results using the output properties of the Barcodes class.

Output Properties

  • EncodedData - This is the result returned by the Barcodes after you have called the encode() method. The EncodedData returns a string in the form "twtwttwtttwtwttttwttwwttwtwttwttwtwttt". The "t" represents a thin bar, while the "w" represents a thick bar. A thick bar is usually thrice the width of a thin bar.
  • The way to interpret the result is that each character indicates alternating bar colors. For example, for "twtw", the first "t" will be a thin black bar, the second "w" will be a thick white bar, the third "t" will be a thin black bar, and the fourth "w" will be a thick white bar.

    Our WPF application will use the string returned by EncodedData to draw a series of alternating black and white rectangles.

  • HumanText - This is a text that is usually placed below the barcode. The HumanText helps a person to read the content of the barcode when a scanner is not available. The HumanText is usually identical to the input Data, but that is not always the case. Sometimes, the HumanText will be formatted with special Start/Stop "*" characters; otherwise, it will include the extra CheckDigit. Our WPF application will use the string returned by HumanText to draw the human readable text below the barcode.

(2) SilverlightBarcodeApplication - A Silverlight UserControl

The layout of the control consists of mainly a Canvas to hold the barcode and a TextBlock for the human readable text. The default value of the TextBlock is "1234", and it marks the location where the human readable text of the barcode will be located. The barcode is located exactly on top of the human readable text. All the rest of the grid cells that surrounds the Canvas and TextBlock are considered quiet zones of the barcode -- they are deliberately left blank so that the scanner will not confuse anything in them with the actual barcode.

The following is the source code for Page.xaml. Set ShowGridLines to True to see the layout:

XML
<UserControl x:Class="SilverlightBarcodeApplication.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="270" Height="100" Loaded="UserControl_Loaded">
    <Grid x:Name="grdLayoutRoot" Background="White" Width="270" 
                Height="100" ShowGridLines="False">
        <Grid.RowDefinitions>
        <RowDefinition Height="10"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="30"></RowDefinition>
        <RowDefinition Height="10"></RowDefinition>
      </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"></ColumnDefinition>
        <ColumnDefinition Width="250"></ColumnDefinition>
        <ColumnDefinition Width="10"></ColumnDefinition>
        </Grid.ColumnDefinitions>
      <Canvas x:Name="MyCanvas" Width="250" Height="50" 
                  Grid.Row="1" Grid.Column="1" />
         <TextBlock x:Name="MyText" Width="250" Height="30" Text="1234" 
           Grid.Row="2" Grid.Column="1"  TextAlignment="Center"  FontSize="16"/>
    </Grid>
</UserControl>

The barcode is drawn in the UserControl_Loaded method when the control is loaded.

The steps are rather straightforward. The control first uses the Barcode library to return a string representing the bars of the barcode (known as the encodedData). From the encodedData, it is able to find the sum total of the number of thin bars that is able to fit into the Canvas width. (By the way, a thick bar is thrice the width of a thin bar). This sum total is known as the encodedLength.

It then finds the width of the smallest bar in WPF coordinates (known as barWidth) by dividing the width of the Canvas by the encodedLength (the sum total of the number of thin bars).

C#
float barWidth = (float)(this.MyCanvas.Width / encodedLength);

The barWidth is then used to draw the individual rectangles of the barcode. In this way, we are able to produce a barcode that fits into the Canvas exactly.

The following is the source code for the Usercontrol_Loaded method:

C#
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    Me.BarcodeSoftware.Barcode.Barcodes barcode = 
                       new Me.BarcodeSoftware.Barcode.Barcodes();
    barcode.BarcodeType = 
            Me.BarcodeSoftware.Barcode.Barcodes.BarcodeEnum.Code39;
    barcode.Data = "123456";
    barcode.encode();
    string encodedData = barcode.EncodedData;
    MyText.Text = barcode.HumanText;

    int encodedLength = 0;
    for (int x = 0; x < encodedData.Length; x++)
    {
        if (encodedData[x] == 't')
            encodedLength++;
        else if (encodedData[x] == 'w')
            encodedLength = encodedLength + 3;
    }

    float barWidth = (float)(this.MyCanvas.Width / encodedLength);

    if (barWidth < 1)
        barWidth = 1;
    float thickWidth = barWidth * 3;
    double incrementWidth = 0;

    int swing = 0;
    for (int x = 0; x < encodedData.Length; x++)
    {
        Brush brush;
        if (swing == 0)
            brush = new SolidColorBrush(Colors.Black);
        else
            brush = new SolidColorBrush(Colors.White);

        if (encodedData[x] == 't')
        {
            Rectangle r = new Rectangle();
            r.Fill = brush;
            r.Width = barWidth;
            r.Height = this.MyCanvas.Height;
            r.SetValue(Canvas.LeftProperty, incrementWidth);
            r.SetValue(Canvas.TopProperty, 0.0);
            MyCanvas.Children.Add(r);
            incrementWidth = incrementWidth + ((barWidth));
        }
        else if (encodedData[x] == 'w')
        {
            Rectangle r = new Rectangle();
            r.Fill = brush;
            r.Width = 3 * barWidth;
            r.Height = this.MyCanvas.Height;
            r.SetValue(Canvas.LeftProperty, incrementWidth);
            r.SetValue(Canvas.TopProperty, 0.0);
            MyCanvas.Children.Add(r);
            incrementWidth = incrementWidth + (3 * (barWidth));
        }

            if (swing == 0)
                swing = 1;
            else
                swing = 0;
        }
    }
}

My Silveright Barcode Software

Further Improvements

A further improvement on the source code is to override the OnRender function of the control. For further updates on this project, please visit my Barcode Software project.

History

  • 01 May 2009: v0.1 - WPF Barcode library with limited number of barcodes. Starting with the Code 39 barcode.
  • 18 May 2009 : v0.2 - My Silverlight barcode software is built using the same code base of the WPF Barcode library.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Singapore Singapore
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow do I implement it into code_93 Pin
hmedina3-Oct-12 2:43
hmedina3-Oct-12 2:43 
GeneralI would like to use this in my Windows Phone 7 project Pin
Rohan Madtha26-Dec-10 21:19
Rohan Madtha26-Dec-10 21:19 
GeneralRe: I would like to use this in my Windows Phone 7 project Pin
Rohan Madtha26-Dec-10 21:49
Rohan Madtha26-Dec-10 21:49 
GeneralThanks Pin
tianbmw12312-Jun-10 19:45
tianbmw12312-Jun-10 19:45 
GeneralNice one! Pin
Philipp Sumi20-May-09 13:25
Philipp Sumi20-May-09 13:25 
Generalgood Pin
nørdic20-May-09 2:36
nørdic20-May-09 2:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.