Creating custom business cards is easy when you have the power of Telerik WPF controls and XAML at your fingertips. This post will walk you through creating a document template where you can print 8 business cards on a standard 8.5”x11” sheet of paper. By using RadRichTextBox we gain full control over the rendering and positioning of our business cards, we also gain accurate printing support. RadBarcodeQR provides us with the modern ability to navigate your user to a blog address when the rendered QR code is scanned by a mobile device.
RadRichTextBox has the ability to render a XAML visual tree as part of a document by using the InlineUIContainer element. This allows us to use the strategy of creating user control in XAML for our business card that binds directly to our business card data. We will simply repeat it as necessary in our carefully laid out RadRichTextBox document.
Let’s start out by defining the data structure that we want to display in our business card. Create a new RadControls for WPF Application named QRBusinessCards and add a BusinessCard.cs class. Implement the class as follows:
BusinessCard : ViewModelBase
_fullName = value;
_title = value;
_addressLine1 = value;
_addressLine2 = value;
_cityState = value;
_phoneNumber = value;
_emailAddress = value;
_qrText = value;
Next, add a new User Control to the project, name it BusinessCardElement.xaml and implement it as follows:
This business card will be bound to the properties of the BusinessCard class. Notice how we used an AlphaNumeric QR barcode that will encode the text that we set in the QrText property of our BusinessCard object. You will see in a moment that we will be setting this value to a blog URL. A couple StackPanel elements were used so that the QR code displays to the left of the business card text.
What use would a business card be if we didn’t provide a way to print it out? As mentioned in the introduction to this post, we will leverage the functionality of RadRichTextBox to lay out 8 business cards ready for printing. To accomplish this we will create a RadDocument that contains a carefully laid out table where we will render our user control in an InlineUIContainer. We will also include a button so that we can easily print our business cards directly from our UI. To implement the business card layout, replace the XAML contained in MainWindow.xaml with the following:
Next, in the code-behind, let’s initialize our BusinessCard object that will serve as our DataContext and implement our print button. Replace the code file MainWindow.xaml.cs with the following:
/// Interaction logic for MainWindow.xaml
MainWindow : Window
BusinessCard card =
"123 Main Street"
"Some City, OH"
.DataContext = card;
sender, RoutedEventArgs e)
When the project is run we are presented with a RadRichTextBox document that displays our business cards with QR codes. You can scan the QR code directly from the screen, or print it out conveniently on your printer.
In this article we demonstrated the combination of some of the strengths of both RadBarcodeQR and RadRichTextBox WPF controls in order to create a quick and easy utility application to create business cards. We showed how you can include databound XAML content in a RadRichTextBox document. Elevate your business cards or promotional materials to the next level by providing smart QR codes to direct consumers to more information or provide a handy way to enter a contact number into their smartphones. Download Code
Carey Payette is a Developer Advocate. You can follow Carey on Twitter @careypayette or read her personal blog at www.codingbandit.com.
Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.