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
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:
publicclassPass{ publicPassType PassType { get; set; } publicstringName { get; set; } publicstringCompany { get; set; }}publicenumPassType{ 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:
publicclassPassWriter{ privateintLogoSize = 50; privateintBarcodeSize = 100; privateintAttendeeDataSize = 100; privateintSideIdentifierWidth = 30; private Rect currentPassRect; private Dictionary<PassType, RgbColor> passTypeColorCode;
privateRadFixedDocument document; privateFixedContentEditor editor; publicIList<Pass> Passes { get; privateset; } publicPassWriter(IList<Pass> passes) { this.Passes = passes; this.passTypeColorCode = newDictionary<PassType, RgbColor>() { { PassType.Presenter, newRgbColor(244, 78, 78) }, { PassType.Attendee, newRgbColor(71, 232, 207) }, { PassType.Staff, newRgbColor(228, 234, 56) }, }; } publicPassWriter() { this.document = newRadFixedDocument(); RadFixedPage page = this.document.Pages.AddPage(); page.Rotation = Telerik.Windows.Documents.Fixed.Model.Data.Rotation.Rotate90; this.editor = newFixedContentEditor(page); } publicRadFixedDocument WriteToDocument() { this.document = newRadFixedDocument(); RadFixedPage page = this.document.Pages.AddPage(); this.editor = newFixedContentEditor(page); this.currentPassRect = newRect(10, 10, 200, 300); foreach(Pass pass inthis.Passes) { this.DrawConferenceLogo(pass); this.DrawPassTypeIdentifier(pass); this.DrawAttendeeData(pass); this.DrawBarcode(pass); this.DrawBorder(pass); this.currentPassRect.X += 220; } returnthis.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:
privatevoidDrawConferenceLogo(Pass pass){ Rect drawRect = newRect(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 = newRgbColor(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):
privatevoidDrawPassTypeIdentifier(Pass pass){ Rect drawRect = newRect(this.currentPassRect.Location, newSize(SideIdentifierWidth, this.currentPassRect.Height)); using(this.editor.SaveProperties()) { LinearGradient linearGradient = newLinearGradient(newPoint(drawRect.X, drawRect.Y), newPoint(drawRect.X + 125, drawRect.Y + 50)); linearGradient.GradientStops.Add(newGradientStop(this.passTypeColorCode[pass.PassType], 0)); linearGradient.GradientStops.Add(newGradientStop(RgbColors.White, 1)); this.editor.GraphicProperties.FillColor = linearGradient; this.editor.DrawRectangle(drawRect); Block textBlock = newBlock(); textBlock.TextProperties.Font = FontsRepository.ZapfDingbats; textBlock.TextProperties.FontSize = 40; textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Center; stringtext = pass.PassType.ToString().ToUpper().Substring(0, 1); textBlock.GraphicProperties.FillColor = RgbColors.White; textBlock.InsertText(text); Size size = textBlock.Measure(); doublex = 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:
privatevoidDrawAttendeeData(Pass pass){ Rect drawRect = newRect(this.currentPassRect.Location.X + 20 + SideIdentifierWidth, this.currentPassRect.Location.Y + LogoSize + 30, 150, AttendeeDataSize); using(this.editor.SaveProperties()) { Block textBlock = newBlock(); textBlock.TextProperties.Font = FontsRepository.ZapfDingbats; textBlock.TextProperties.FontSize = 10; textBlock.HorizontalAlignment = Telerik.Windows.Documents.Fixed.Model.Editing.Flow.HorizontalAlignment.Left; stringtext = "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 = newBlock(); 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 = newBlock(); 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:
privatevoidDrawBarcode(Pass pass){ Rect drawRect = newRect(this.currentPassRect.X + 10 + (this.currentPassRect.Width - BarcodeSize) / 2, this.currentPassRect.Location.Y + LogoSize + 30 + AttendeeDataSize, BarcodeSize, BarcodeSize); stringvCardText = "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 = newRadBarcode(); barcode.Symbology = newQRCode(CodeMode.Byte, 0, ErrorCorrectionLevel.L, ECIMode.None, FNC1Mode.None, ""); barcode.Value = vCardText; using(MemoryStream stream = newMemoryStream()) { barcode.ExportToImage(stream, newSystem.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:
privatevoidDrawBorder(Pass pass){ this.editor.DrawLine(this.currentPassRect.Location, newPoint(this.currentPassRect.X, this.currentPassRect.Bottom)); this.editor.DrawLine(newPoint(this.currentPassRect.X, this.currentPassRect.Bottom), newPoint(this.currentPassRect.Right, this.currentPassRect.Bottom)); this.editor.DrawLine(newPoint(this.currentPassRect.Right, this.currentPassRect.Bottom), newPoint(this.currentPassRect.Right, this.currentPassRect.Y)); this.editor.DrawLine(this.currentPassRect.Location, newPoint(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:
publicvoidGenerateAndSavePasses(){ this.passes = newList<Pass>() { newPass() { PassType = PassType.Presenter, Company = "Company Corp.", Name = "Melissa Foster"}, newPass() { PassType = PassType.Attendee, Company = "Company Ltd.", Name = "Vincent Merk"}, newPass() { PassType = PassType.Staff, Company = "Organizer Inc.", Name = "Sue Patrick"}, }; RadFixedDocument doc = newPassWriter(this.passes).WriteToDocument(); PdfFormatProvider provider = newPdfFormatProvider(); using(FileStream fs = newFileStream("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!