BarCodeEdit

• Jun 07, 2019
• 2 minutes to read

The BarCodeEdit control is used to display various kinds of barcodes.

The BarCodeEdit offers the following features.

• Various barcode types

  The BarCodeEdit control can display 27 barcode types including the widely-used QR, UPC and Intelligent mail.

• Easy configuration

  To display the barcode of a specific type, assign the BarCodeEdit.StyleSettings property with a corresponding StyleSettings object. Each StyleSettings object contains properties that allow you to configure a specific barcode type.

  The following example demonstrates the configuration of a barcode editor that displays a QR Code.

  XAML

  <dxe:BarCodeEdit AutoModule="True" ShowText="False" EditValue="http://www.devexpress.com">
     <dxe:BarCodeEdit.StyleSettings>
         <dxe:QRCodeStyleSettings CompactionMode="Byte" />
     </dxe:BarCodeEdit.StyleSettings>
  </dxe:BarCodeEdit>
  

• Error correction

  QR and PDF417 barcodes have bulit-in support for error correction.

  XAML

  <dxe:BarCodeEdit AutoModule="True" ShowText="False" EditValue="Devx">
     <dxe:BarCodeEdit.StyleSettings>
         <dxe:PDF417StyleSettings ErrorCorrectionLevel="3"/>
     </dxe:BarCodeEdit.StyleSettings>
  </dxe:BarCodeEdit>
  

• Optimized for in-place editing

  BarCodeEdit can be used standalone or as an in-place editor nested in a container control. The BarCodeEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.

Declaration

This example demonstrates how to use BarCodeEdit to display a QR code based on a custom value.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-qrcode-barcodecontrol-t174016.

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="BarCodeEdit.MainWindow"
        Title="MainWindow" Height="300" Width="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="242" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <dxe:BarCodeEdit Grid.Row="0" AutoModule="True" ShowText="False" EditValue="{Binding Path=Text,ElementName=textBox}" >
            <dxe:BarCodeEdit.StyleSettings>
                <dxe:QRCodeStyleSettings CompactionMode="Byte" />
            </dxe:BarCodeEdit.StyleSettings>
        </dxe:BarCodeEdit>
        <TextBox Grid.Row="1" Name="textBox">
            DevExpress
        </TextBox>

    </Grid>
</Window>