Silverlight 4 provides printing capabilities which allows you to print any visual element to the client’s machine installed printers. Although the printing capabilities in Silverlight 4 are somewhat limited (mainly because it only supports bitmap output printings) you can easly print barcode labels from your Silverlight app.
In this post, we’ll try to provide some guidelines about particular printers based on Thermal transfer technologies. To print barcode labels from your Silverlight app you need the following:
Code in your app the label design which can contain Texts, Shapes like rects, ovals, etc. and barcodes. Texts & Shapes are already available from Silverlight framework through TextBlock, Rectangle, Ellipse, Paths, etc classes. However, barcodes are not and you will need a third-party component for such task or write your own encoder. Neodynamic launched the first barcode component for Silverlight platform which fully leverages the vector engine and produce high quality barcodes for all symbologies used today like linears (Code 39, Code 128, EAN-13/UPC-A, ISBN, GS1-128 formerlly UCC-EAN/128, GS1 DataBar, etc), postals (USPS Intelligent Mail, Royal Mail Barcode, etc), 2D (Data Matrix, QR Code, Aztec Code, PDF417, MaxiCode, etc) and MICR (E-13-B)
You need a Thermal printer. Any printer brand (Zebra, Datamax, Sato, Intermec, Samsung-Bixolon, Toshiba TEC, Wasp, Citizen, Printronix, Avery-Dennison, CognitiveTPG, Dymo, Epson, Ithaca, Monarch, O-Neil, Primera, TSC, Unitech) can be used if the manufacturer provides you a Windows driver which must be installed on the client machine.
The following simple Silverlight app displays a “static” barcode label design and allows the user to print it to their thermal printer. The label design is static for simplicity but you can create dynamic barcode labels based on your business/dev needs.
One important thing you need to keep in mind is the physical size of your labels. You must translate it to the visual element which in this case is the Canvas class of Silvelright framework. Canvas size must be specified in DIU (device independent unit) while real labels are measure in Inches, Millimiters or Centimeters. The conversion from real units to DIU is very straightforward. In Silverlight, 1 DIU = 1/96 inch. So if your labels are 4in x 3in, then the Canvas element must be set up to 384 (Width) and 288 (Height). The code below uses this label size but you can change it if needed.
Another important thing is the Thermal printer calibration. If your printer is not correctly calibrated, then is possible that your labels be printed outisde of the available area or cut off somehow. Most printer drivers provide you an option for doing printer calibration. After calibration, the printer can automatically recognize the label size currently loaded on the media roll and your printings from Silverlight will be fine.
This is the screenshot of the “static” label on the Silverlight app sample:
This is a screenshot of the Silverlight page in VS 2010 showing the barcode label design. It contains some TextBlock and Shapes objects as well as two instances of Barcode Professional for Silverlight, one for a simple Code 39 linear barcode and the other one for a 2D Data Matrix.
There’s also a Print button which allows printing the barcode label to the printer. Remember that in Silverlight, all printing job must be user-instantiated.
To reproduce this sample:
- Download/install Barcode Professional for Silverlight
- Open VS 2010 and create a new Silverlight 4 Application project (C#) naming it PrintingBarcodeLabelsCS NOTE: The following sample was made in C# bu can be easily translated to VB if needed.
- Add a reference to Neodynamic.Silverlight.Barcode.dll
- Open the MainPage.xaml file and paste the following XAML markup
<UserControl xmlns:my="clr-namespace:Neodynamic.Silverlight;assembly=Neodynamic.Silverlight.Barcode" x:Class="PrintingBarcodeLabelsCS.MainPage"
<Grid x:Name="LayoutRoot" Background="White">
<RowDefinition Height="40*" />
<RowDefinition Height="260*" />
<TextBlock Text="Printing Barcode Labels" FontSize="16" FontWeight="Bold" Margin="10"></TextBlock>
<Button Name="btnPrint" Height="30" Width="50" Click="btnPrint_Click">Print</Button>
<Border Grid.Row="1" BorderBrush="Gray" BorderThickness="2" Background="Silver">
<Canvas Name="myLabel" Width="384" Height="288" Background="White">
<my:BarcodeProfessional Canvas.Left="17" Canvas.Top="60" />
<my:BarcodeProfessional Symbology="DataMatrix" Code="A 2D barcode here" Canvas.Left="257" Canvas.Top="184" />
<TextBlock Canvas.Left="17" Canvas.Top="16" Height="23" Name="textBlock1" Text="This is a sample text" FontSize="14" FontWeight="Bold" />
<TextBlock Canvas.Left="17" Canvas.Top="133" Height="23" Name="textBlock2" Text="More text here and some shapes below" />
<Rectangle Canvas.Left="17" Canvas.Top="162" Height="49" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="113" />
<Ellipse Canvas.Left="97" Canvas.Top="178" Height="78" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="133" />
- Open the MainPage.xaml.cs file and paste the following code
public partial class MainPage : UserControl
private void btnPrint_Click(object sender, RoutedEventArgs e)
pd = new PrintDocument();
pd.PrintPage += new EventHandler<PrintPageEventArgs>(pd_PrintPage);
void pd_PrintPage(object sender, PrintPageEventArgs e)
e.PageVisual = myLabel;
We tested it with a Zebra thermal printer and the output printing was the following label.
If you had any question just contact our tech support