Telerik blogs

How To Create Business Cards with QR Codes using RadBarcodeQR and RadRichTextBox

by Carey Payette
October 23, 2013 Desktop, WinForms 0 Comments


QR Business CardCreating 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.

OVERVIEW

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.

DEFINING THE BUSINESS CARD

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:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             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.

DEFINING THE BUSINESS CARD DOCUMENT

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                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);
        }
  
     
    }
}

THE FINAL PRODUCT

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.


Full Business Card Sheet

CONCLUSION

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

Get the most of XAML Download RadControls for WPF Download RadControls for Silverlight

Webinar Week

About the Author

Carey Payette

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.

Comments

Comments are disabled in preview mode.