How to generate barcode image in C# WPF Windows App?

How to generate, print barcode image label for WPF Windows Apps with free C# barcode example source code

Generate and Draw Linear & 2D Barcodes with best WPF C# barcoding application

This C# tutorial provides a step by step guide for building a WPF (.NET Core) Windows app, where user can create and print QR Code and other 20+ barcodes on the WPF form.

Windows Presentation Foundation (WPF) is a desktop UI framework which is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. WPF application is for Microsoft Windows only.

After this tutorial, you will be albe to build a WPF desktop app to

Create, display QR Code and 20+ other barcode formats on the WPF Windows form, and customize and save to the user local system.
Support System.Drawing.Common for Windows
Support .NET 9, 8, 7, 6, 5 and .NET Core 3.1, 2.1 WPF Windows application

How to generate, render linear, 2d barcodes in WPF Core Windows app using C#

Download C# Barcode Generator Library
Install C# library to create barcode images in WPF Core app
Step by Step Tutorial

Prerequisites

Top

Download and install the following software on your computer

Visual Studio 2022
.NET 6.0 SDK
OnBarcode.Barcode.Common.dll

Create a WPF Core Windows app with barcode generator enabled using C#

Top

1. Create new WPF Core app

Start Visual Studio 2022 and select "Create a new project".

Select "WPF Application" in the dialog, and then press "Next" button.

Create a new project with name "OnBarcodeGeneratorWPFDotNetCoreDemo".

Select .NET 6.0, and then press "Create".

Now, all auto-generated files could be found in the solution explorer.

2. Install Barcode Generator Library dll and NuGet Package

Add OnBarcode Barcode Generator C# library for WPF Core DLL reference "OnBarcode.Barcode.Common.dll".

Right-click "Dependencies" in the Solution Explorer, and select "Manage NuGet Packages".

Select "Browse" and use the search control to find "System.Drawing.Common" from the package source "nugget.org".

Choose the version 6.0.0 or later to install the package.

Check "Packages" in the Solution Explorer to ensure the installation is success.

3. Design the user interface in WPF app project

Select MainWindow.xaml in the Solution Explorer to open the WPF Designer.

Step 1: adjust attributes of the Window tag as below.

<Window x:Class="OnBarcodeGeneratorWPFDotNetCoreDemo.MainWindow"
        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:local="clr-namespace:OnBarcodeGeneratorWPFDotNetCoreDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="720">
<Grid>

    </Grid>
</Window>

Step 2: add all controls into the <Grid> tag.

List of controls to add (total 14 controls)

A Label with a TextBox for data message
A Label with a TextBox for barcode width
A Label with a TextBox for resolution
A Label, a TextBox and a Rectangle for fore color
A Label, a TextBox and a Rectangle for back color
A Button for show barcode result
A Image control

<Window x:Class="OnBarcodeGeneratorWPFDotNetCoreDemo.MainWindow"
        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:local="clr-namespace:OnBarcodeGeneratorWPFDotNetCoreDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="720">
    <Grid>
        <!-- For Data Message -->
        <Label Content="Data Message:" Margin="15,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox Name="tbData" Text="QRCode" Margin="125,30,0,0" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- For Barcode Width -->
        <Label Content="Width (inch):" Margin="15,54,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox Name="tbWidth" Text="1.0" Margin="125,59,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- For Resolution -->
        <Label Content="Resolution (dpi):" Margin="15,83,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox Name="tbResolution" Text="300" Margin="125,88,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- Color of Bar Modules in the barcode -->
        <Label Content="Fore Color:" Margin="15,112,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox Name="tbForeColor" Text="000000" Width="70" Margin="125,117,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Rectangle Name="rtForeColor" Fill="#000000" Stroke="Black" Width="18" Height="18" Margin="200,117,0,0"
                   HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- Color of Space Modules in the barcode -->
        <Label Content="Back Color:" Margin="15,141,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox Name="tbBackColor" Text="FFFFFF" Width="70" Margin="125,146,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Rectangle Name="rtBackColor" Fill="#FFFFFF" Stroke="Black" Width="18" Height="18" Margin="200,146,0,0"
                   HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- Button for updating the barcode preview -->
        <Button Content="Show" Width="72" Margin="100,225,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <!-- Barcode Preview Image -->
        <Image Name="imagePreview" Margin="331,12,0,0" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Grid>
</Window>

4. Add behind code

Click "MainWindow.xaml.cs" to open the C# file.

Replace all contents in the MainWindow.xaml.cs file by following codes.

using System;
using System.IO;
using System.Drawing;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using OnBarcode.Barcode;

namespace OnBarcodeGeneratorWPFDotNetCoreDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            updatePictureBox();
        }

        private void tbForeColor_TextChanged(object sender, TextChangedEventArgs e)
        {
            try
            {
                System.Drawing.Color color = hexStringToColor(this.tbForeColor.Text);
                System.Windows.Media.Color mColor = System.Windows.Media.Color.FromRgb(color.R, color.G, color.B);
                this.rtForeColor.Fill = new System.Windows.Media.SolidColorBrush(mColor);
            }
            catch { }
        }

        private void tbBackColor_TextChanged(object sender, TextChangedEventArgs e)
        {
            try
            {
                System.Drawing.Color color = hexStringToColor(this.tbBackColor.Text);
                System.Windows.Media.Color mColor = System.Windows.Media.Color.FromRgb(color.R, color.G, color.B);
                this.rtBackColor.Fill = new System.Windows.Media.SolidColorBrush(mColor);
            }
            catch { }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            updatePictureBox();
        }

        private void updatePictureBox()
        {
            try
            {
                // Create new barcode the current settings.
                QRCode barcode = new QRCode();
                barcode.DataMode = QRCodeDataMode.Auto;
                barcode.Data = this.tbData.Text;
                barcode.AutoResize = true;
                barcode.UOM = UnitOfMeasure.INCH;
                barcode.BarcodeWidth = float.Parse(this.tbWidth.Text);
                barcode.BarcodeHeight = float.Parse(this.tbWidth.Text);
                barcode.Resolution = int.Parse(this.tbResolution.Text);
                barcode.ForeColor = hexStringToColor(this.tbForeColor.Text);
                barcode.BackColor = hexStringToColor(this.tbBackColor.Text);
                using (MemoryStream ms = new MemoryStream())
                {
                    // Note: BitmapImage would ignore resolution in Bitmap.
                    System.Drawing.Bitmap bitmap = barcode.drawBarcode();
                    bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
                    BitmapImage bi = new BitmapImage();
                    bi.BeginInit();
                    bi.StreamSource = ms;
                    bi.CacheOption = BitmapCacheOption.OnLoad;
                    bi.EndInit();
                    this.imagePreview.Width = bitmap.Width;
                    this.imagePreview.Height = bitmap.Height;
                    this.imagePreview.Source = bi;
                }
            }
            catch { }
        }

        // Convert hex-string XXXXXX to RGB color
        private System.Drawing.Color hexStringToColor(String hexString)
        {
            if (String.IsNullOrEmpty(hexString))
                return System.Drawing.Color.White;
            // Padding 0 if hexString is less than 6 characters.
            if (hexString.Length < 6)
                hexString = hexString.PadLeft(6, '0');
            try
            {
                int rr = (hexCharToInt(hexString[0]) << 4) + hexCharToInt(hexString[1]);
                int gg = (hexCharToInt(hexString[2]) << 4) + hexCharToInt(hexString[3]);
                int bb = (hexCharToInt(hexString[4]) << 4) + hexCharToInt(hexString[5]);
                return System.Drawing.Color.FromArgb(rr, gg, bb);
            }
            catch (Exception) { }
            return System.Drawing.Color.White;
        }

        private int hexCharToInt(char c)
        {
            if (c >= '0' && c <= '9') return (c - '0');
            if (c >= 'A' && c <= 'F') return (c - 'A') + 10;
            if (c >= 'a' && c <= 'f') return (c - 'a') + 10;
            return 0;
        }
    }
}

5. Add event handler to TextBox and Button controls

TextBox: tbForeColor

<TextBox Name="tbForeColor" Text="000000" Width="70" Margin="125,117,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
                 TextChanged="tbForeColor_TextChanged"/>

TextBox: tbBackColor

<TextBox Name="tbBackColor" Text="FFFFFF" Width="70" Margin="125,146,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
                 TextChanged="tbBackColor_TextChanged"/>

Button: Show

<Button Content="Show" Width="72" Margin="100,225,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
                Click="Button_Click"/>

6. It is done. Now press "Ctrl+F5" to run the project.

Screenshot for the Demo application.

Change barcode settings and press "Show" button to refresh the generated and updated barcode image.