Telerik blogs
Telerik UI for WinForms BarCode Blog post Cover Big Image

We've introduced a new BarCode control to Telerik UI for WinForms. Let's explore how you can create conference passes in your application using the new component and the powerful PDF Processing APIs built into the suite.

With the Telerik R1'18 Release, we've added a brand new control to the Telerik UI for WinForms suite - the BarCode. You can use this in your projects to generate various barcode formats depending on your requirements.

In the following paragraphs, I will show you how to bring together the Barcode control alongside the PDFProcessing APIs and build a project to generate conference passes in your WinForms desktop app. Bear in mind, that the focus of this blog is the code samples for generating the passes and not so much on the design part, which is very fortunate for me. :) 

Now let’s dive right into it .

Creating Conference Passes in Your WinForms App: A Step-by-Step Guide

ConferencePasses

Step 1: Creating the Project and Adding Assembly References

First, we need to create a new project and add the needed assembly references. Here is the list:

Telerik.WinControls
Telerik.WinControls.UI
Telerik.Windows.Documents.Core
Telerik.Windows.Documents.Fixed
Telerik.Windows.Zip
TelerikCommon
WindowsBase

Hint: The Telerik assemblies can be found in the installation of the UI for WinForms suite or in GAC, and the WindowsBase is in the Assemblies -> Framework tab in the Reference Manager

The first thing we have to do is create is a class that will hold the information of individual conference attendees, which will later be transferred to the conference passes:

public class Pass
{
    public PassType PassType { get; set; }
    public string Name { get; set; }
    public string Company { get; set; }
}
 
public enum PassType
{
    Staff,
    Attendee,
    Presenter
}

Step 2: The Writer

Next we need a writer that will take a list of such attendees and draw conference passes for each one in a PDF document. There are some fields for sizes and colors that are purely cosmetic. We will look in the important bits in just a moment:

public class PassWriter
{
    private int LogoSize = 50;
    private int BarcodeSize = 100;
    private int AttendeeDataSize = 100;
    private int SideIdentifierWidth = 30;
    private Rect currentPassRect;
    private Dictionary<PassType, RgbColor> passTypeColorCode;
    private RadFixedDocument document;
    private FixedContentEditor editor;
    public IList<Pass> Passes { get; private set; }
 
    public PassWriter(IList<Pass> passes)
    {
        this.Passes = passes;
 
        this.passTypeColorCode = new Dictionary<PassType, RgbColor>()
        {
            { PassType.Presenter, new RgbColor(244, 78, 78) },
            { PassType.Attendee, new RgbColor(71, 232, 207) },
            { PassType.Staff, new RgbColor(228, 234, 56) },
        };
    }
 
    public PassWriter()
    {
        this.document = new RadFixedDocument();
        RadFixedPage page = this.document.Pages.AddPage();
        page.Rotation = Telerik.Windows.Documents.Fixed.Model.Data.Rotation.Rotate90;
        this.editor = new FixedContentEditor(page);
    }
 
    public RadFixedDocument WriteToDocument()
    {
        this.document = new RadFixedDocument();
        RadFixedPage page = this.document.Pages.AddPage();
        this.editor = new FixedContentEditor(page);
 
        this.currentPassRect = new Rect(10, 10, 200, 300);
 
        foreach (Pass pass in this.Passes)
        {
            this.DrawConferenceLogo(pass);
            this.DrawPassTypeIdentifier(pass);
            this.DrawAttendeeData(pass);
            this.DrawBarcode(pass);
            this.DrawBorder(pass);
 
            this.currentPassRect.X += 220;
        }
 
        return this.document;
    }
}

The main things in this class are the document and editor fields. They will be used for building a PDF document and for performing the actual drawing in the document. These will be utilized inside the methods that are missing for the moment. Our next step will be to fill those in.

Step 3: Setting Up the Methods

The first methods fetches an image, with the conference logo, from the project resources, and draws it in the top section of the pass:

private void DrawConferenceLogo(Pass pass)
{
    Rect drawRect = new Rect(this.currentPassRect.Location.X + SideIdentifierWidth, this.currentPassRect.Location.Y,
        this.currentPassRect.Width - SideIdentifierWidth, LogoSize);
 
    System.Reflection.Assembly myAssembly = System.Reflection.Assembly.GetExecutingAssembly();
    Stream stream = myAssembly.GetManifestResourceStream("ConferencePasses.Resources.ConferenceLogo.png");
 
    this.editor.Position.Translate(drawRect.X, drawRect.Y);
    this.editor.DrawImage(stream, drawRect.Size);
    this.editor.Position.Translate(0, 0);
 
    drawRect.Y += drawRect.Height;
    drawRect.Height = 8;
    this.editor.GraphicProperties.FillColor = new RgbColor(5, 222, 12);
    this.editor.DrawRectangle(drawRect);
}

The next method paints a gradient filled strip on the left side of the pass and draws a letter at the top of that strip. The combination of these two identify the type of pass (Presenter, Attendee, Staff):

private void DrawPassTypeIdentifier(Pass pass)
{
    Rect drawRect = new Rect(this.currentPassRect.Location, new Size(SideIdentifierWidth, this.currentPassRect.Height));
 
    using (this.editor.SaveProperties())
    {
        LinearGradient linearGradient = new LinearGradient(new Point(drawRect.X, drawRect.Y), new Point(drawRect.X + 125, drawRect.Y + 50));
        linearGradient.GradientStops.Add(new GradientStop(this.passTypeColorCode[pass.PassType], 0));
        linearGradient.GradientStops.Add(new GradientStop(RgbColors.White, 1));
        this.editor.GraphicProperties.FillColor = linearGradient;
        this.editor.DrawRectangle(drawRect);
 
        Block textBlock = new Block();
        textBlock.TextProperties.Font = FontsRepository.ZapfDingbats;
        textBlock.TextProperties.FontSize = 40;               
        textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Center;
         
        string text = pass.PassType.ToString().ToUpper().Substring(0, 1);
        textBlock.GraphicProperties.FillColor = RgbColors.White;
        textBlock.InsertText(text);
        Size size = textBlock.Measure();
        double x = drawRect.X + (drawRect.Width - size.Width) / 2;
        this.editor.Position.Translate(x, 5);
        editor.DrawBlock(textBlock);
        this.editor.Position.Translate(0, 0);
    }
}

The following draws the attendee data which consists of name label, the attendee name and company:

private void DrawAttendeeData(Pass pass)
{
    Rect drawRect = new Rect(this.currentPassRect.Location.X + 20 + SideIdentifierWidth, this.currentPassRect.Location.Y + LogoSize + 30, 150, AttendeeDataSize);
 
    using (this.editor.SaveProperties())
    {
        Block textBlock = new Block();
        textBlock.TextProperties.Font = FontsRepository.ZapfDingbats;
        textBlock.TextProperties.FontSize = 10;
        textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Left;
        string text = "name";
        textBlock.GraphicProperties.FillColor = RgbColors.Black;
        textBlock.InsertText(text);
        Size size = textBlock.Measure();
        this.editor.Position.Translate(drawRect.X, drawRect.Y);
        editor.DrawBlock(textBlock);
 
        textBlock = new Block();
        textBlock.TextProperties.Font = FontsRepository.Helvetica;
        textBlock.TextProperties.FontSize = 20;
        textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Left;
        text = pass.Name;
        textBlock.GraphicProperties.FillColor = RgbColors.Black;
        textBlock.InsertText(text);
        drawRect.Y += size.Height;
        size = textBlock.Measure();
        this.editor.Position.Translate(drawRect.X, drawRect.Y);
        editor.DrawBlock(textBlock);
 
        textBlock = new Block();
        textBlock.TextProperties.Font = FontsRepository.Helvetica;
        textBlock.TextProperties.FontSize = 15;
        textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Left;
        text = pass.Company;
        textBlock.GraphicProperties.FillColor = RgbColors.Black;
        textBlock.InsertText(text);
        drawRect.Y += size.Height;
        size = textBlock.Measure();
        this.editor.Position.Translate(drawRect.X, drawRect.Y);
        editor.DrawBlock(textBlock);
 
        this.editor.Position.Translate(0, 0);
    }
}

Step 4: Generating the QR Code

The penultimate step is to use the Barcode to generate a QR code with the contact card of the attendee, export this code to an image and draw that image on the conference pass:

private void DrawBarcode(Pass pass)
{
    Rect drawRect = new Rect(this.currentPassRect.X + 10 + (this.currentPassRect.Width - BarcodeSize) / 2,
        this.currentPassRect.Location.Y + LogoSize + 30 + AttendeeDataSize, BarcodeSize, BarcodeSize);
 
    string vCardText = "BEGIN:VCARD\r\nVERSION:2.1\r\nN:";
    vCardText += pass.Name + "\r\n";
    vCardText += "EMAIL;PREF;INTERNET:" + pass.Name.Replace(' ', '.') + "@" + pass.Company.Split(' ')[0] + ".com" + "\r\n";
    vCardText += "END:VCARD";
 
    RadBarcode barcode = new RadBarcode();
    barcode.Symbology = new QRCode(CodeMode.Byte, 0, ErrorCorrectionLevel.L, ECIMode.None, FNC1Mode.None, "");
    barcode.Value = vCardText;
 
    using (MemoryStream stream = new MemoryStream())
    {
        barcode.ExportToImage(stream, new System.Drawing.Size(BarcodeSize, BarcodeSize));
        this.editor.Position.Translate(drawRect.X, drawRect.Y);
        this.editor.DrawImage(stream);
        this.editor.Position.Translate(0, 0);
    }
}

Step 5: Finishing Up

The final step is to draw a rectangle around the pass:

private void DrawBorder(Pass pass)
{
    this.editor.DrawLine(this.currentPassRect.Location, new Point(this.currentPassRect.X, this.currentPassRect.Bottom));
    this.editor.DrawLine(new Point(this.currentPassRect.X, this.currentPassRect.Bottom), new Point(this.currentPassRect.Right, this.currentPassRect.Bottom));
    this.editor.DrawLine(new Point(this.currentPassRect.Right, this.currentPassRect.Bottom), new Point(this.currentPassRect.Right, this.currentPassRect.Y));
    this.editor.DrawLine(this.currentPassRect.Location, new Point(this.currentPassRect.Right, this.currentPassRect.Y));
}

And we're done! This is it, we are ready to roll. We just need to generate some sample data and tell our writer where to write:

public void GenerateAndSavePasses()
{
    this.passes = new List<Pass>()
    {
        new Pass() { PassType = PassType.Presenter, Company = "Company Corp.", Name = "Melissa Foster" },
        new Pass() { PassType = PassType.Attendee, Company = "Company Ltd.", Name = "Vincent Merk" },
        new Pass() { PassType = PassType.Staff, Company = "Organizer Inc.", Name = "Sue Patrick" },
    };
 
    RadFixedDocument doc = new PassWriter(this.passes).WriteToDocument();
    PdfFormatProvider provider = new PdfFormatProvider();
 
    using (FileStream fs = new FileStream("Passes.pdf", FileMode.Create))
    {
        provider.Export(doc, fs);
    }
}

Our conference passes are now saved in a file and ready to be printed, published, shared or kept in secret for their aesthetic value (or because of it).

Closing Words and Next Steps

This is just one example of how you can use the Barcode control in Telerik UI for WinForms. There are numerous other use cases for barcodes in plethora of industries like retail, manufacturing, healthcare, governmental and administration facilities, access control & identification, postal & shipping, ticketing, enhancing/extending UX and plenty more.

If you want to generate BarCodes in your application, make sure to download Telerik UI for WinForms and try it out yourself:

Download Telerik UI for WinForms

Feel free to refer to the WinForms documentation and Document Processing documentation for some additional resources, which will help you get around faster.

Lastly, we would love to hear what you think, so should you have any questions and/or comments, please share them to our Feedback Portal or in the comment section below. 

Thanks and hope you found this article useful! 


About the Author

Ivan Petrov

Ivan Petrov was a Senior Software Developer working at the Telerik WinForms DevLabs.

Related Posts

Comments

Comments are disabled in preview mode.