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:
using
System;
using
System.Linq;
using
Telerik.Windows.Controls;
namespace
QRBusinessCards
{
public
class
BusinessCard : ViewModelBase
{
private
string
_fullName;
public
string
FullName
{
get
{
return
_fullName;
}
set
{
_fullName = value;
OnPropertyChanged(
"FullName"
);
}
}
private
string
_title;
public
string
Title
{
get
{
return
_title;
}
set
{
_title = value;
OnPropertyChanged(
"Title"
);
}
}
private
string
_addressLine1;
public
string
AddressLine1
{
get
{
return
_addressLine1;
}
set
{
_addressLine1 = value;
OnPropertyChanged(
"AddressLine1"
);
}
}
private
string
_addressLine2;
public
string
AddressLine2
{
get
{
return
_addressLine2;
}
set
{
_addressLine2 = value;
OnPropertyChanged(
"AddressLine2"
);
}
}
private
string
_cityState;
public
string
CityState
{
get
{
return
_cityState;
}
set
{
_cityState = value;
OnPropertyChanged(
"CityState"
);
}
}
private
string
_phoneNumber;
public
string
PhoneNumber
{
get
{
return
_phoneNumber;
}
set
{
_phoneNumber = value;
OnPropertyChanged(
"PhoneNumber"
);
}
}
private
string
_emailAddress;
public
string
EmailAddress
{
get
{
return
_emailAddress;
}
set
{
_emailAddress = value;
OnPropertyChanged(
"EmailAddress"
);
}
}
private
string
_qrText;
public
string
QrText
{
get
{
return
_qrText;
}
set
{
_qrText = value;
OnPropertyChanged(
"QrText"
);
}
}
}
}
Next, add a new User Control to the project, name it BusinessCardElement.xaml and implement it as follows:
<
UserControl
x:Class
=
"QRBusinessCards.BusinessCardElement"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
Width
=
"336"
Height
=
"192"
>
<
Grid
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
telerik:RadBarcodeQR
Text
=
"{Binding QrText}"
Width
=
"177"
Height
=
"177"
Version
=
"2"
ErrorCorrectionLevel
=
"L"
Mode
=
"Alphanumeric"
ECI
=
"None"
/>
<
StackPanel
Orientation
=
"Vertical"
Width
=
"191"
Height
=
"192"
>
<
TextBlock
Text
=
"{Binding FullName}"
FontSize
=
"18"
Margin
=
"0,25,0,0"
Foreground
=
"#FF13C10B"
/>
<
TextBlock
Text
=
"{Binding Title}"
FontSize
=
"14"
Margin
=
"0,5,0,0"
/>
<
TextBlock
Text
=
"{Binding AddressLine1}"
FontSize
=
"12"
/>
<
TextBlock
Text
=
"{Binding AddressLine2}"
FontSize
=
"12"
/>
<
TextBlock
Text
=
"{Binding CityState}"
FontSize
=
"12"
/>
<
TextBlock
Text
=
"{Binding EmailAddress}"
FontSize
=
"10"
Margin
=
"0,5,0,0"
/>
<
TextBlock
Text
=
"{Binding PhoneNumber}"
FontSize
=
"10"
/>
</
StackPanel
>
</
StackPanel
>
</
Grid
>
</
UserControl
>
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:
<
Window
x:Class
=
"QRBusinessCards.MainWindow"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local
=
"clr-namespace:QRBusinessCards"
Title
=
"MainWindow"
Height
=
"1500"
Width
=
"1000"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"30"
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
telerik:RadButton
Content
=
"PRINT"
Width
=
"50"
Grid.Row
=
"0"
Grid.Column
=
"0"
x:Name
=
"printButton"
Click
=
"printButton_Click"
/>
<
telerik:RadRichTextBox
x:Name
=
"radRichTextBox"
Grid.Row
=
"1"
Grid.Column
=
"0"
>
<
telerik:RadDocument
x:Name
=
"MyBusinessCards"
LayoutMode
=
"Paged"
DefaultPageLayoutSettings
=
"816,1056"
>
<
telerik:Section
PageMargin
=
"48,0,0,0"
>
<
telerik:Paragraph
/>
<
telerik:Table
GridColumnWidthsSerializationInfo
=
"Fixed,336;Fixed,48;Fixed,336"
>
<
telerik:TableRow
Height
=
"192"
>
<
telerik:TableCell
x:Name
=
"busCard1"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"spacerRow1"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"busCard2"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"48"
>
<
telerik:TableCell
ColumnSpan
=
"3"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"192"
>
<
telerik:TableCell
x:Name
=
"busCard3"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"spacerRow2"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"busCard4"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"48"
>
<
telerik:TableCell
ColumnSpan
=
"3"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"192"
>
<
telerik:TableCell
x:Name
=
"busCard5"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"spacerRow3"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"busCard6"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"48"
>
<
telerik:TableCell
ColumnSpan
=
"3"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
</
telerik:TableRow
>
<
telerik:TableRow
Height
=
"192"
>
<
telerik:TableCell
x:Name
=
"busCard7"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"spacerRow4"
>
<
telerik:Paragraph
/>
</
telerik:TableCell
>
<
telerik:TableCell
x:Name
=
"busCard8"
Borders
=
"1,Single,#FF000000"
>
<
telerik:Paragraph
>
<
telerik:InlineUIContainer
>
<
local:BusinessCardElement
/>
</
telerik:InlineUIContainer
>
</
telerik:Paragraph
>
</
telerik:TableCell
>
</
telerik:TableRow
>
</
telerik:Table
>
</
telerik:Section
>
</
telerik:RadDocument
>
</
telerik:RadRichTextBox
>
</
Grid
>
</
Window
>
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:
using
System;
using
System.Linq;
using
System.Windows;
using
Telerik.Windows.Documents.Model;
using
Telerik.Windows.Documents.UI;
namespace
QRBusinessCards
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public
partial
class
MainWindow : Window
{
public
MainWindow()
{
InitializeComponent();
BusinessCard card =
new
BusinessCard();
card.FullName =
"Carey Payette"
;
card.Title =
"Developer Evangelist"
;
card.AddressLine1 =
"123 Main Street"
;
card.AddressLine2 =
"11th Floor"
;
card.CityState =
"Some City, OH"
;
card.PhoneNumber =
"(123)456-7890"
;
card.EmailAddress =
"me@mycompany.com"
;
card.QrText =
"http://blogs.telerik.com/careypayette"
;
this
.DataContext = card;
}
private
void
printButton_Click(
object
sender, RoutedEventArgs e)
{
radRichTextBox.Print(
"MyBusinessCards"
, PrintMode.Native);
}
}
}
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 Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.