Telerik XAML Q3’11 Beta—A Walkthrough Part 1: RadBarCode

The original version of this post can be found on SilverlightShow.net.

Come mid-November Telerik will be releasing the official versions of RadBarCode, RadVirtualizingWrapPanel, and RadChartingKit—and a couple surprises to boot. ;-)  In this 3-part article, Telerik XAML Q3’11 Beta—A Walkthrough, we give you a comprehensive technical look at each of these 3 new controls—make sure to check them all out!  We also recommend that you download the beta so you can make the most of what you’re reading.

For an introductory overview you can check out the official beta announcement on our Silverlight Team blog. 

Introducing RadBarCode

RadBarcode allows you to accurately track your physical products with native high-quality vector-based images that follow the most popular and widely-adopted barcode symbologies, including:

Alpha-numeric Codes (variable length): Code 128, Code 128A, Code 128B, Code 128C and Code 39

Numeric Codes (fixed length): Code EAN-13, Code EAN-8, Code UPC-A, PostNet and Code UPC-E

You can check out the BarCode demos here.

Getting Started with 3 Commonly Used Barcodes

We are going to build a sample project that uses Telerik’s RadBarCode in Silverlight 4— walking you through the use of Code 128, Code EAN-13, and UPC-A.

Code 128

Code 128 is a high-density barcode symbology that is used for alpha-numeric or numeric-only barcodes.  It is also commonly used for labels in inventory and industrial applications.

So, Open Visual Studio 2010 and select a new Silverlight Project, then, give it any name that you want.  In this example, I have given it the name of RadBarCodeSample.

We are going to need to add two references to our project in order to use any of the 9 barcode symbologies.

1. Telerik.Windows.Controls.DataVisualization
2. Telerik.Windows.Controls

Make sure that you select 2011.3.1020.1040 as the version number to ensure that you are using the Q3 Beta release.

Now, let’s go ahead and add the Telerik XAML Namespace to our MainPage.xaml file. Simply double-click the MainPage.xaml file and add the following code snippet:

            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Once this is complete, we can now add our Barcode inside the Grid tag as shown below:

                <telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="False" />

Our completed MainPage.xaml file should then look like the following:

<UserControl x:Class="RadBarCodeSample.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="False" />

    </Grid>

</UserControl>

Inside the designer our Barcode is now displayed as such:

If we wanted to show the Checksum then we would simply change the property ShowChecksum to True.

<telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="True" />

This will give us the barcode with a proper checksum—as highlighted in yellow below:

Nice work. J

Code EAN-13

Let’s now take a look at Code EAN-13—barcodes, which are used worldwide for marking products often sold at retail point-of-sale.  It is a 13-digit (12 data and 1 check) standard which is a superset of the original 12-digit Universal Product Code (UPC) system developed in the United States.

Now, head back to the MainPage.xaml file and make sure the following namespace exists:

            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Once this is complete, we can add our Barcode inside the Grid tag as shown below:

                <telerik:RadBarcodeEAN13 Height="120" Width="425" Text="590123412345" ShowChecksum="True" />

Please note that in this sample, we included the Checksum value.

Pretty cool, huh?

UPC-A

Finally, check out another commonly used barcode called UPC-A—a 13-digit (12 data and 1 check) standard that is widely used in North America, and in countries including the UK, Australia, and New Zealand for tracking trade items in stores.

Again, make sure your Telerik namespace exists in XAML, and then add the following code snippet:

<telerik:RadBarcodeUPCA Height="120" Width="425" Text="590123412345" ShowChecksum="True" />

Inside the designer, our barcode now looks like the following:

And there you have it, Code 128, Code EAN-13, and UPC-A.  With 6 more barcode symboligies included in the beta, we hope you’ll get the chance to try them all out and let us know what you think.

But wait, there’s more: you can easily switch between barcodes!

Telerik has made it very easy to switch between barcodes without adding additional references or namespaces. Simply hit “Ctrl-Space” inside of the Telerik reference to see a complete list of available barcodes, as shown below:

Thanks for Reading

We hope this walkthrough has you convinced at how easy it is to get started with Telerik’s RadBarCode.  Don’t forget to check out parts two and three of Telerik XAML Q3’11 Beta:  RadVirtualizingWrapPanel and RadChartingKit, respectively.